現(xiàn)在有很多的打包工具可以選擇,grunt,gulp,webpack等等。vue官方建議是使用webpack,而且webpack相對其他打包工具的好處是代碼動態(tài)編譯萌丈，可以根據(jù)需要提取出公共部分的代碼评腺。因此我們也選擇webpack作為打包工具股缸。
目錄結(jié)構(gòu)
開發(fā)目錄 src
assets 靜態(tài)資源验游，如圖片等的保存
css 樣式文件幢炸，css,less等
fonts 字體文件泄隔，根據(jù)需要添加自定義字體
js js框架拒贱，公共部分代碼宛徊，自定義組件等
5.view html頁面文件,頁面入口js文件
build 打包參數(shù)配置
主要用于對打包過程的控制
1. webpack.base.conf.js 基礎(chǔ)配置參數(shù),開發(fā)和生成代碼打包共用
2. webpack.dev.conf.js 開發(fā)環(huán)境下的打包參數(shù)配置
3. webpack.prod.conf.js 生產(chǎn)環(huán)境的打包參數(shù)配置
config 打包模式配置
主要是打包相關(guān)的基礎(chǔ)參數(shù)配置，如文件存放目錄逻澳，打包后的訪問根目錄闸天，是否壓縮等
assets 生產(chǎn)環(huán)境下的js/css/圖片等文件保存路徑
可在config中指定
view 生產(chǎn)環(huán)境下的頁面文件Html保存路徑
和src/view下的html文件一一對應(yīng)
package.json 打包的環(huán)境依賴配置
使用方式
開發(fā) npm run dev 開啟本地web服務(wù),方便調(diào)試頁面和代碼
生產(chǎn)環(huán)境打包 npm run build 將src下的代碼打包到根目錄下的 assets和view目錄下
功能
支持vue開發(fā)的調(diào)試，支持webpack打包的調(diào)試和自動更新斜做，不需要手動刷新代碼
支持代碼和語法檢查苞氮，可在根目錄的.eslintrc下配置檢查規(guī)則
3.支持webpack的多頁面(多入口)開發(fā)，相比單入口模式瓤逼，邏輯更清楚
使用說明
1.view下的頁面必須放在view的下級目錄笼吟，比如view/index/index.html,同時每個頁面文件必須搭配一個同名的js文件作為頁面入口，比如view/index/index.js
2.可根據(jù)需要配置本地調(diào)試服務(wù)器的端口霸旗，默認(rèn)8000,
在config/index下配置
3.可配置打包路徑等贷帮，同樣在config/index下配置
初始化說明
在根目錄下執(zhí)行 npm install (如果不是root用戶的話，sudo npm install)
打包或者調(diào)試時诱告，如果npm 命令提示錯誤撵枢，一般是某個模塊未安裝，可執(zhí)行 npm install ***(模塊名稱) 安裝相關(guān)模塊
npm run dev (調(diào)試)
npm run build (正式打包)
