vue-cli的模板

vue-cli的腳手架項(xiàng)目模板有webpack-simple 和 webpack 兩種的區(qū)別在于webpack-simple 沒有包括Eslint 檢查等功能

vue-cli的項(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         // 測(cè)試環(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)目名稱、版本、描述、作者等）。

自定義npm相關(guān)命令

在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í)所依賴的模塊(項(xiàng)目環(huán)境依賴) 在命令行中運(yùn)行npm install命令，會(huì)自動(dòng)安裝dependencies和devDependencies字段中的模塊。

webpack配置相關(guān)

詳情在webpack相關(guān)博客

dev-server.js

......// http-proxy可以實(shí)現(xiàn)轉(zhuǎn)發(fā)所有請(qǐng)求代理到后端真實(shí)API地址，以實(shí)現(xiàn)前后端開發(fā)完全分離// 在config/index.js中可以對(duì)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()})})