一、安裝、創建配置、運行、打包
全局安裝 npm i vue-cli -g
新建文件夾中命令行輸入 vue init webpack? xxxx(xxxx為項目名稱)
之后填寫一系列描述等（省略），生成的目錄結構如下：
cd xxxx(xxxx為項目名稱)切換到當前項目
npm run dev 在localhost:8080 熱加載項目
npm run build 進行打包壓縮
二、打包問題
打包后生成dist文件夾
1.去掉css 和js 的map文件（體積過大）
map文件的作用：項目打包后，代碼都是經過壓縮加密的，如果運行時報錯，輸出的錯誤信息無法準確得知是哪里的代碼報錯。?
有了map就可以像未加密的代碼一樣，準確的輸出是哪一行哪一列有錯。
在build文件夾下的webpack.prod.conf.js文件中找到 devtool? 和?cssProcessorOptions ?都設置為 false，如下圖
2.打包后執行dist文件夾中的index.html按F12發現全是css和js路徑報錯
找到config文件夾中的index.js文件找到 build 下的? assetsPublicPath 設置為 "./ " (原本為"/")
三、按路由進行按需加載
在路由頁面引入，如下圖所示：
打包后的js：
四、關閉vue-cli eslint格式檢測：
（格式很煩，引號只能用單引號或者雙引號，末尾加了多余的分號等都要提醒，警告看著很惱火所以去掉提醒）
創建一個vue項目的時候，會有一個選擇：Use ESLint to lint your code? (Y/n)，在這一步，我們選擇no，或者找到build\webpack.base.conf.js去掉下圖代碼。
五、打包后，字體路徑出錯：
找到build文件下的utils.js在如下圖所示處加上這行代碼publicPath: '../../',
六、路由中@的含義：
@是webpack配置的引用路徑，resolve里面有一個alias的配置項目，能夠讓開發者指定一些模塊的引用路徑。對一些經常要被import或者require的庫,我們最好可以直接指定它們的位置，這樣方便我們查找。
