接觸過vue的同學應該都知道，用vue-cli開發(fā)vue的項目十分方便错维，它可以幫你快速構建一個具有強大構建能力的Vue.js項目纸俭。今天不談什么是vue-cli，而是來說說用vue-cli構建的項目結構是什么樣的并分析部分文件任内。這里以我之前寫的一個小項目為參考，項目是用vue-cli的webpack模板構建的融柬，項目地址：https://github.com/hieeyh/tong2-family死嗦。
項目結構
.
|-- build // 項目構建(webpack)相關代碼
| |-- build.js // 生產環(huán)境構建代碼
| |-- check-version.js // 檢查node、npm等版本
| |-- dev-client.js // 熱重載相關
| |-- dev-server.js // 構建本地服務器
| |-- utils.js // 構建工具相關
| |-- webpack.base.conf.js // webpack基礎配置
| |-- webpack.dev.conf.js // webpack開發(fā)環(huán)境配置
| |-- webpack.prod.conf.js // webpack生產環(huán)境配置
|-- config // 項目開發(fā)環(huán)境配置
| |-- dev.env.js // 開發(fā)環(huán)境變量
| |-- index.js // 項目一些配置變量
| |-- prod.env.js // 生產環(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 // 項目說明
|-- favicon.ico
|-- index.html // 入口頁面
|-- package.json // 項目基本信息
.
package.json
package.json文件是項目根目錄下的一個文件，定義該項目開發(fā)所需要的各種模塊以及一些項目配置信息（如項目名稱摘盆、版本翼雀、描述、作者等）孩擂。
scripts字段
package.json文件里有一個scripts字段狼渊。
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js"
}
在開發(fā)環(huán)境下，在命令行中運行npm run dev就相當于在執(zhí)行node build/dev-server.js类垦。所以script字段是用來指定npm相關命令的縮寫的狈邑。
dependencies字段和devDependencies字段
dependencies字段指定了項目運行時所依賴的模塊，devDependencies字段指定了項目開發(fā)時所依賴的模塊蚤认。在命令行中運行npm install命令米苹，會自動安裝dependencies和devDependencies字段中的模塊。
package.json還有很多配置相關項砰琢，想進一步了解package.json的可參考：https://docs.npmjs.com/files/package.json
webpack配置相關
上面說到在命令行中npm run dev就相當于在執(zhí)行node build/dev-server.js蘸嘶，想必dev-server.js這個文件是十分重要的，它是在開發(fā)環(huán)境下構建時第一個要運行的文件陪汽。掘金上已經有一篇對vue-cli#2.0 webpack配置的分析文章训唱，里面詳細講解了webpack相關配置文件的每行代碼的意思，我只做一些補充掩缓。鏈接在此（一定要自習閱讀雪情，收獲會很大）：https://gold.xitu.io/post/584e48b2ac502e006c74a120遵岩。
dev-server.js
...
...
// http-proxy可以實現(xiàn)轉發(fā)所有請求代理到后端真實API地址你辣，以實現(xiàn)前后端開發(fā)完全分離
// 在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
這個文件主要是用來檢測當前環(huán)境中的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版本需求所組成的數(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完全搞懂還是需要費很大功夫的尘执，我感覺自己也只是入了一個門而已舍哄，要想深入了解webpack還是要去官網(wǎng)看說明文檔。
.babelrc
Babel解釋器的配置文件誊锭，存放在根目錄下表悬。Babel是一個轉碼器，項目里需要用它將ES6代碼轉為ES5代碼丧靡。這里有一篇阮一峰老師寫的相關文章供參考：Babel 入門教程
// 設定轉碼規(guī)則
"presets": ["es2015", "stage-2"],
// 轉碼的一些插件
"plugins": ["transform-runtime"],
"comments": false
.editorconfig
該文件定義項目的編碼規(guī)范蟆沫，編輯器的行為會與.editorconfig 文件中定義的一致，并且其優(yōu)先級比編輯器自身的設置要高温治，這在多人合作開發(fā)項目時十分有用而且必要饭庞。
root = true
[*] // 對所有文件應用下面的規(guī)則
charset = utf-8 // 編碼規(guī)則用utf-8
indent_style = space // 縮進用空格
indent_size = 2 // 縮進數(shù)量為2個空格
end_of_line = lf // 換行符格式
insert_final_newline = true // 是否在文件的最后插入一個空行
trim_trailing_whitespace = true // 是否刪除行尾的空格
了解更多請參考官方配置文檔http://editorconfig.org/
接觸vue并不久，很多東西也不是特別清楚熬荆，文章里有什么問題歡迎指出舟山。
