vue-cli&&webpack

準備工作

1. 去node.js官網下載最新的node.js
   一般選擇下載左邊的，右邊是最新的，可能有未知的小bug；
2. 直接點選next安裝node即可；
3. 通過Windows的cmd視窗，node -v可檢視安裝好的node版本好；
4. npm在安裝node的時候也會順帶安裝好，可以通過npm -v檢視版本號；
5. 淘寶映象，安裝依賴包的時候速度會快一些，命令列是：

建立專案

1. 全域性安裝vue腳手架，在cmd中輸入命令列：cnpm install -g vue-cli
2. 建立專案，命令列是：vue init webpack my-vue(專案資料夾名)
   ，然後根據提示回車或者N即可；
3. cd my-vue(專案資料夾名)進入到專案中去，然後可以通過npm install 依賴安裝包，安裝之後大致的結構圖，如下圖所示：，
   具體每個檔案是做什麼的，一下圖做了具體說明：
   其中原始碼目錄中包含assets資原始檔夾、components元件資料夾、App.vue根元件、main.js頁面入口檔案；

測試環境

1. 在cmd命令視窗中輸入npm run dev，當編譯成功，並且顯示如下：
2. 去瀏覽器中輸入localhost:8081即可訪問到初始頁面；

專案打包

1. 當完成專案需求，需要將專案進行打包到伺服器。之前專案的測試都是在開發者模式進行測試的，現在需要切換到生產者模式進行測試；
2. 打包命令：npm run build，成功之後會在專案資料夾下生產一個dist目錄
3. 在Windows環境下打包一般會出現路徑的問題，需要對配置檔案進行設定；
   3.1 對css和js檔案路徑的配置，如下圖所示：
   主要是修改assetsPublicPath: ‘./’，在/前面加一個.
   3.2 對圖片檔案路徑的設定，如下圖所示：
   主要是加入publicPath:’../../’