本博客使用現(xiàn)代化的前端開發(fā)流程
即Vue.js+webpack構(gòu)建個人博客單頁應用
let's do it.
1. 安裝vue-cli命令行工具
vue-cli是官方的命令行工具，我們用它生成一個配置完好的項目，這樣我們就能直接上手開發(fā)了，而不用配置一大堆webpack相關(guān)的東西。
Vue.js 提供一個官方命令行工具，可用于快速搭建大型單頁應用。該工具提供開箱即用的構(gòu)建工具配置，帶來現(xiàn)代化的前端開發(fā)流程。只需幾分鐘即可創(chuàng)建并啟動一個帶熱重載、保存時靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項目：
命令行輸入：
// 國內(nèi)推薦使用cnpm，要不安裝的太慢了
npm install -g vue-cli
2. 創(chuàng)建基于webpack的基礎工程
進入你要創(chuàng)建項目的目錄，
輸入以下命令
// 最后一個參數(shù)是項目名稱，寫自己的即可
vue init webpack blog-waka-by-vue
輸入完成后按回車，會提示確認一些東西如下，默認一路回車就行了：
現(xiàn)在默認使用的是Vue2.x，如果要使用Vue1.x可以輸入
vue init webpack#1.0 blog-waka-by-vue
創(chuàng)建完成以后進入該項目目錄，安裝所需依賴，啟動服務
// 進入該項目目錄
cd blog-waka-by-vue
// 安裝所需依賴
npm install
// 啟動服務
npm run dev
瀏覽器應該會自動彈出來，不彈出來也沒有關(guān)系，瀏覽器中輸入localhost:8080，即可看到跑起來的工程
用喜歡的編輯器打開工程即可開始開發(fā)工作，我比較喜歡WebStorm，但是WebStorm打開項目的時候很大幾率會卡死，因為依賴的node_modules太多的緣故，不知是否有人碰到過同樣的問題
下圖為目錄結(jié)構(gòu)，開發(fā)時只關(guān)注src目錄即可
3. ESLint格式不規(guī)范導致編譯錯誤的解決方法
開發(fā)過程中因為安裝了ESLint，所以當格式不規(guī)范時會遇到編譯不通過的情況，比如：
我在src/main.js 下強迫癥加了個分號
然后他就報錯了...
解決方案很簡單，錯誤信息有個關(guān)鍵字，如圖：
在根目錄 .eslintrc.js 文件的 rules 字段下加一行
// 0代表不做限制，錯誤提示有一個網(wǎng)頁鏈接，可打開看到ESLint對該屬性做的詳細規(guī)定
'semi':0
即可，如圖：
修改 .eslintrc.js 熱更新不會生效，所以需要重啟服務
重啟服務即可看到編譯成功，網(wǎng)頁顯示正常
其他ESLint的編譯錯誤也可通過該方式解決，這種方式是一種簡單省事的做法，也可以通過點開ESLint錯誤的鏈接查看ESLint對特定屬性定義的規(guī)則，從而更加嚴禁的使用ESLint。
