Vue-cli 搭建移動端項目

Vue-cli項目詳解大全

一、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 配置信息

二、注意點：babel-polyfill的引用和使用：

(1)、Babel介紹：

理解： babel是javascript語法的編譯器。它是爲了解決：將ES6語法（不含ES6新的API）編譯成可被低版本瀏覽器識別的語法。

(2)、.babelrc配置

在Babel執行編譯的過程當中，會從項目的根目錄下的 .babelrc文件中讀取配置。在.babelrc配置文件中，主要是對預設(presets) 和 插件(plugins) 進行配置。

"presets": [
   'env',
   {
     'modules': false
   }
]

這裏的modules:false的目的是：之前咱們須要使用babel來將ES6的模塊語法轉換爲AMD, CommonJS，UMD之類的模塊化標準語法，可是如今webpack都幫我作了這件事了，因此咱們不須要babel來作，所以須要在babel配置項中設置modules爲false，由於它默認值是commonjs, 不然的話在webpack轉換完成後，再用common.js就會產生衝突。

（3）、babel-polyfill
babel-polyfill就是爲了解決ES6新的API與這種全局對象或全局對象方法不足的問題。

注意：解決瀏覽器紅色的報錯警示：vuex requires a Promise polyfill in this browser.方法：https://www.cnblogs.com/princ...

三、移動端（微信等）調試工具：使用 vConsole調試console

https://blog.csdn.net/m0_3703...