準備工作

1.判斷是否需要FQ或安裝鏡像，鏡像一般可安裝國內淘寶鏡像，詳情可看這里：cnpm

npm install -g cnpm --registry="cnpm"全局安裝淘寶cnpm。

2.開發工具選擇很多，VUE無專用開發工具，開發項目多以SPA形式體現，本例使用 Visual Studio Code。

3.調試工具選擇很多，官方推薦 vue-devtools 。

安裝方法：FQ或者github主頁。https://github.com/vuejs/vue-devtools下載壓縮包，解壓到Chrome擴展程序。

環境搭建

1.安裝 Node.js 10.15.3, npm包管理工具（高版本node.js自帶npm）。

安裝完成后，DOS命令行輸入命令檢查安裝情況npm -v,出現npm版本號即可。

 下載地址https://nodejs.org/en/download/

2.全局安裝 vue-cli腳手架

DOS命令行安裝(-g 參數表示安裝至 npm 工作路徑,以后任意位置均可訪問)

npm install -g vue-cli

3.安裝 開發工具 Visual Studio Code

1.下載地址 https://code.visualstudio.com/Download

注意 User Installer / System Installer 不同（建議安裝系統版本）

2.安裝 Vetur ,vue 2 snippets插件

文件 -> 首選項 -> 擴展 -> 搜索 -> 輸入 Vetur/vue 2 snippets -> 安裝

3.安裝 語言包（視個人喜好）

文件 -> 首選項 -> 擴展 -> 搜索 -> 輸入 Chinese(Simplified)... -> 安裝

4.打開文件夾... 開發已存在項目

4.安裝 vue-devtools。

1.下載 https://github.com/vuejs/vue-devtools

2.DOS 命令進入解壓后目錄

 修改 /shells/chrome/manifest.json中 background 節點 persistent 值為 true

3.運行 npm install 命令安裝依賴包。

進度條等待完成，大約5-15分鐘，必要使用cnpm

4.運行 npm run build(一定要執行這步，不然后面會報錯)

5.啟動 Google Chrome -> 輸入 chrome://extensions/ -〉確認打開“開發者模式” -> 加載已解壓擴展程序 -> 選擇 shells/chrome 確定即可安裝

初始化項目

初始化項目有多種方式，建議采用 Webpack 模板模式

1.進入需要創建Vue項目文件夾，打開DOS命令行輸入：vue init webpack 項目名稱

2.然后終端會出現下圖“一問一答”模式

“Project name”：這個是項目名稱，默認是輸入時的那個名稱，想改的話直接輸入修改，也可以直接回車

“Install vue-router”:是否需要vue-router，這里默認選擇使用，這樣生成好的項目就會有相關的路由配置文件

“Use ESLint to lint your code”:是否使用ESLint，剛才說了我們這個項目需要使用所以也是直接回車，默認使用，這樣會生成相關的ESLint配置

“Setup unit tests with Karma + Moch?”: 是否安裝單元測試。由于我們現在還沒有單元測試，所以這里選擇的是”N”