Vue-cliモバイル端末プロジェクトの構築

2367 ワード

Vue-cliプロジェクト詳細大全
1、Vue-cliプロジェクト構造剖析
(1)、外層目次:
readme              //       
package.json         //        
package.lock.json    //                      ,         
license             //       
index.html          //           
.postcssrc.js        //  postcss     
(postcss:             ,               ,             )
.gitignore          //       git        
.eslintrc.js        //                
.eslintignore       //      eslintrc          
.editorconfig       //                   
.babelrc            //        Vue             ,       babel                 ,                 ,babel         ,       

(2)、フォルダ:
static                  //static          ,                   json   
node_modules                 //            node  
src                         //         
src/main.js                  //         
src/app.vue                 //           
src/router/index.js          //         
src/components               //          
src/assets                  //          
config                      //        
config/index.js              //     
config/dev.ent.js            //        
config/prod.ent.js           //        
build                      //        webpack     ,vue-cli      
build/webpack.base.conf.js   //    webpack     
build/webpack.dev.conf.js    //      webpack     
build/webpack.prod.conf.js   //      webpack     

2、注意点:babel-polyfillの参照と使用:
(1)、Babel紹介:
  : babel javascript      。      : ES6  (  ES6  API)                。

(2)、.babelrc構成
Babelがコンパイルを実行すると、プロジェクトのルートディレクトリの下にある.babelrcファイルから構成が読み込まれます..babelrcプロファイルでは、主にプリセット(presets)とプラグイン(plugins)を構成します.
"presets": [
   'env',
   {
     'modules': false
   }
]

ここのmodules:falseの目的は、以前はbabelを使ってES 6のモジュール文法をAMD、CommonJS、UMDなどのモジュール化標準文法に変換する必要があったのですが、今はwebpackが手伝ってくれたのでbabelは必要ないのでbabel modules false commonjs、そうでなければwebpack変換が完了した後、common.jsを使うと衝突します.
(3)、babel-polyfillbabel-polyfillは、ES 6の新しいAPIとこのようなグローバルオブジェクトまたはグローバルオブジェクトメソッドが不足している問題を解決するためである. : :vuex requires a Promise polyfill in this browser.方法:https://www.cnblogs.com/princ...
3、モバイル端末(微信など)デバッグツール:vConsoleを使用してconsoleをデバッグする
https://blog.csdn.net/m0_3703...