vue-cli的模板
- vue-cli的腳手架項目模板有webpack-simple 和 webpack
- 兩種的區(qū)別在于webpack-simple 沒有包括Eslint 檢查等功能
vue-cli的項目結構
.
|-- 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ā)所需要的各種模塊以及一些項目配置信息（如項目名稱、版本、描述、作者等）。
自定義npm相關命令
- 在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ā)時所依賴的模塊(項目環(huán)境依賴)
- 在命令行中運行npm install命令，會自動安裝dependencies和devDependencies字段中的模塊。
webpack配置相關
- 詳情在webpack相關博客
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)
)
}
}
...
}
.babelrc
- Babel解釋器的配置文件，存放在根目錄下。Babel是一個轉碼器，項目里需要用它將ES6代碼轉為ES5代碼
// 設定轉碼規(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 // 是否刪除行尾的空格
