vue-cli# 項目結構

引自：https://segmentfault.com/a/1190000007880723

http://blog.csdn.net/hongchh/article/details/55113751

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

package.json

package.json文件是項目根目錄下的一個文件，定義該項目開發所須要的各類模塊以及一些項目配置信息（如項目名稱、版本、描述、做者等）。

scripts字段

package.json文件裏有一個scripts字段。

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

在開發環境下，在命令行中運行npm run dev就至關於在執行node build/dev-server.js。因此script字段是用來指定npm相關命令的縮寫的。

dependencies字段和devDependencies字段

dependencies字段指定了項目運行時所依賴的模塊，devDependencies字段指定了項目開發時所依賴的模塊。在命令行中運行npm install命令，會自動安裝dependencies和devDependencies字段中的模塊。 
package.json還有不少配置相關項，想進一步瞭解package.json的可參考：https://docs.npmjs.com/files/package.json

webpack配置相關

上面說到在命令行中npm run dev就至關於在執行node build/dev-server.js，想必dev-server.js這個文件是十分重要的，它是在開發環境下構建時第一個要運行的文件。掘金上已經有一篇對vue-cli#2.0 webpack配置的分析文章，裏面詳細講解了webpack相關配置文件的每行代碼的意思，我只作一些補充。連接在此（必定要自習閱讀，收穫會很大）：https://gold.xitu.io/post/584e48b2ac502e006c74a120。

dev-server.js

...
...
// http-proxy能夠實現轉發全部請求代理到後端真實API地址，以實現先後端開發徹底分離
// 在config/index.js中能夠對proxyTable想進行配置
var proxyMiddleware = require('http-proxy-middleware')
...
...
// 熱加載要使用webpack-dev-middleware在沒有webpack-dev-server的時候進行熱加載
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// 當html-webpack-plugin模板改變是強制進行頁面從新加載
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轉碼
        {
            test: /\.js$/,
            loader: 'babel',
            include: projectRoot,
            // 哪些文件不須要轉碼
            exclude: /node_modules/
        },
        ...
        ...
        }
    },
    // vue文件一些相關配置
    vue: {}
} 

check-version.js

這個文件主要是用來檢測當前環境中的node和npm版本和咱們須要的是否一致的。

// 加載語義化版本測試庫
var semver = require('semver')
// 定製控制檯日誌的輸入樣式
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版本需求所組成的數組
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徹底搞懂仍是須要費很大功夫的，我感受本身也只是入了一個門而已，要想深刻了解webpack仍是要去官網看說明文檔。

1. http://webpack.github.io/docs/

2. https://webpack.js.org/configuration/

.babelrc

Babel解釋器的配置文件，存放在根目錄下。Babel是一個轉碼器，項目裏須要用它將ES6代碼轉爲ES5代碼。這裏有一篇阮一峯老師寫的相關文章供參考：Babel 入門教程

  // 設定轉碼規則
  "presets": ["es2015", "stage-2"],
  // 轉碼的一些插件
  "plugins": ["transform-runtime"],
  "comments": false 

.editorconfig

該文件定義項目的編碼規範，編輯器的行爲會與.editorconfig 文件中定義的一致，而且其優先級比編輯器自身的設置要高，這在多人合做開發項目時十分有用並且必要。

root = true

[*]    // 對全部文件應用下面的規則
charset = utf-8                    // 編碼規則用utf-8
indent_style = space               // 縮進用空格
indent_size = 2                    // 縮進數量爲2個空格
end_of_line = lf                   // 換行符格式
insert_final_newline = true        // 是否在文件的最後插入一個空行
trim_trailing_whitespace = true    // 是否刪除行尾的空格

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