接觸過vue的同學(xué)應(yīng)該都知道，用vue-cli開發(fā)vue的項(xiàng)目十分方便，它可以幫你快速構(gòu)建一個(gè)具有強(qiáng)大構(gòu)建能力的Vue.js項(xiàng)目。今天不談什么是vue-cli，而是來說說用vue-cli構(gòu)建的項(xiàng)目結(jié)構(gòu)是什么樣的并分析部分文件。這里以我之前寫的一個(gè)小項(xiàng)目為參考，項(xiàng)目是用vue-cli的webpack模板構(gòu)建的，項(xiàng)目地址：https://github.com/hieeyh/tong2-family。

項(xiàng)目結(jié)構(gòu)

.
|-- build                            // 項(xiàng)目構(gòu)建(webpack)相關(guān)代碼
|   |-- build.js                     // 生產(chǎn)環(huán)境構(gòu)建代碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- dev-client.js                // 熱重載相關(guān)
|   |-- dev-server.js                // 構(gòu)建本地服務(wù)器
|   |-- utils.js                     // 構(gòu)建工具相關(guān)
|   |-- webpack.base.conf.js         // webpack基礎(chǔ)配置
|   |-- webpack.dev.conf.js          // webpack開發(fā)環(huán)境配置
|   |-- webpack.prod.conf.js         // webpack生產(chǎn)環(huán)境配置
|-- config                           // 項(xiàng)目開發(fā)環(huán)境配置
|   |-- dev.env.js                   // 開發(fā)環(huán)境變量
|   |-- index.js                     // 項(xiàng)目一些配置變量
|   |-- prod.env.js                  // 生產(chǎn)環(huán)境變量
|   |-- test.env.js                  // 測試環(huán)境變量
|-- src                              // 源碼目錄
|   |-- components                     // vue公共組件
|   |-- store                          // vuex的狀態(tài)管理
|   |-- App.vue                        // 頁面入口文件
|   |-- main.js                        // 程序入口文件，加載各種公共組件
|-- static                           // 靜態(tài)文件，比如一些圖片，json數(shù)據(jù)等
|   |-- data                           // 群聊分析得到的數(shù)據(jù)用于數(shù)據(jù)可視化
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .gitignore                       // git上傳需要忽略的文件格式
|-- README.md                        // 項(xiàng)目說明
|-- favicon.ico 
|-- index.html                       // 入口頁面
|-- package.json                     // 項(xiàng)目基本信息
.

package.json

package.json文件是項(xiàng)目根目錄下的一個(gè)文件，定義該項(xiàng)目開發(fā)所需要的各種模塊以及一些項(xiàng)目配置信息（如項(xiàng)目名稱、版本、描述、作者等）。

scripts字段

package.json文件里有一個(gè)scripts字段。

"scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  }

在開發(fā)環(huán)境下，在命令行中運(yùn)行npm run dev就相當(dāng)于在執(zhí)行node build/dev-server.js。所以script字段是用來指定npm相關(guān)命令的縮寫的。

dependencies字段和devDependencies字段

dependencies字段指定了項(xiàng)目運(yùn)行時(shí)所依賴的模塊，devDependencies字段指定了項(xiàng)目開發(fā)時(shí)所依賴的模塊。在命令行中運(yùn)行npm install命令，會(huì)自動(dòng)安裝dependencies和devDependencies字段中的模塊。
package.json還有很多配置相關(guān)項(xiàng)，想進(jìn)一步了解package.json的可參考：https://docs.npmjs.com/files/package.json

webpack配置相關(guān)

上面說到在命令行中npm run dev就相當(dāng)于在執(zhí)行node build/dev-server.js，想必dev-server.js這個(gè)文件是十分重要的，它是在開發(fā)環(huán)境下構(gòu)建時(shí)第一個(gè)要運(yùn)行的文件。掘金上已經(jīng)有一篇對vue-cli#2.0 webpack配置的分析文章，里面詳細(xì)講解了webpack相關(guān)配置文件的每行代碼的意思，我只做一些補(bǔ)充。鏈接在此（一定要自習(xí)閱讀，收獲會(huì)很大）：https://gold.xitu.io/post/584e48b2ac502e006c74a120。

dev-server.js

...
...
// http-proxy可以實(shí)現(xiàn)轉(zhuǎn)發(fā)所有請求代理到后端真實(shí)API地址，以實(shí)現(xiàn)前后端開發(fā)完全分離
// 在config/index.js中可以對proxyTable想進(jìn)行配置
var proxyMiddleware = require('http-proxy-middleware')
...
...
// 熱加載要使用webpack-dev-middleware在沒有webpack-dev-server的時(shí)候進(jìn)行熱加載
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// 當(dāng)html-webpack-plugin模板改變是強(qiáng)制進(jìn)行頁面重新加載
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

webpack.base.conf.js

...
...
module.export = {
    // 編譯入口文件
    entry: {},
    // 編譯輸出路徑
    output: {},
    // 一些解決方案配置
    resolve: {},
    resolveLoader: {},
    module: {
        // 各種不同類型文件加載器配置
        loaders: {
        ...
        ...
        // js文件用babel轉(zhuǎn)碼
        {
            test: /\.js$/,
            loader: 'babel',
            include: projectRoot,
            // 哪些文件不需要轉(zhuǎn)碼
            exclude: /node_modules/
        },
        ...
        ...
        }
    },
    // vue文件一些相關(guān)配置
    vue: {}
} 

check-version.js

這個(gè)文件主要是用來檢測當(dāng)前環(huán)境中的node和npm版本和我們需要的是否一致的。

// 加載語義化版本測試庫
var semver = require('semver')
// 定制控制臺(tái)日志的輸入樣式
var chalk = require('chalk')
// 引入package.json文件
var packageConfig = require('../package.json')
var exec = function (cmd) {
  return require('child_process')
    .execSync(cmd).toString().trim()
}
// 定義node和npm版本需求所組成的數(shù)組
var versionRequirements = [
  {
    name: 'node',
    currentVersion: semver.clean(process.version),
    versionRequirement: packageConfig.engines.node
  },
  {
    name: 'npm',
    currentVersion: exec('npm --version'),
    versionRequirement: packageConfig.engines.npm
  }
]
module.exports = function () {
  var warnings = []
  // 依次判斷版本是否符合要求
  for (var i = 0; i < versionRequirements.length; i++) {
    var mod = versionRequirements[i]
    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
      warnings.push(mod.name + ': ' +
        chalk.red(mod.currentVersion) + ' should be ' +
        chalk.green(mod.versionRequirement)
      )
    }
  }
  ...
}

想把webpack完全搞懂還是需要費(fèi)很大功夫的，我感覺自己也只是入了一個(gè)門而已，要想深入了解webpack還是要去官網(wǎng)看說明文檔。

1. http://webpack.github.io/docs/
2. https://webpack.js.org/configuration/
3. webpack學(xué)習(xí)之路

.babelrc

Babel解釋器的配置文件，存放在根目錄下。Babel是一個(gè)轉(zhuǎn)碼器，項(xiàng)目里需要用它將ES6代碼轉(zhuǎn)為ES5代碼。這里有一篇阮一峰老師寫的相關(guān)文章供參考：Babel 入門教程

  // 設(shè)定轉(zhuǎn)碼規(guī)則
  "presets": ["es2015", "stage-2"],
  // 轉(zhuǎn)碼的一些插件
  "plugins": ["transform-runtime"],
  "comments": false 

.editorconfig

該文件定義項(xiàng)目的編碼規(guī)范，編輯器的行為會(huì)與.editorconfig 文件中定義的一致，并且其優(yōu)先級比編輯器自身的設(shè)置要高，這在多人合作開發(fā)項(xiàng)目時(shí)十分有用而且必要。

root = true

[*]    // 對所有文件應(yīng)用下面的規(guī)則
charset = utf-8                    // 編碼規(guī)則用utf-8
indent_style = space               // 縮進(jìn)用空格
indent_size = 2                    // 縮進(jìn)數(shù)量為2個(gè)空格
end_of_line = lf                   // 換行符格式
insert_final_newline = true        // 是否在文件的最后插入一個(gè)空行
trim_trailing_whitespace = true    // 是否刪除行尾的空格

了解更多請參考官方配置文檔http://editorconfig.org/

接觸vue并不久，很多東西也不是特別清楚，文章里有什么問題歡迎指出。