搭建Vue開發環境

1.安裝Node.js

安裝包下載地址： https://nodejs.org/en/

安裝時能夠選擇是否自動安裝必要的工具，如Chocolatey、Python2，這裏我選擇了自動安裝

Node.js安裝結束後，打開cmd輸入 node -v ，回車，會輸出node的版本號則表示Node.js安裝成功。

2.設置Node.js prefix（全局）和cache（緩存）路徑

在nodejs安裝路徑下，新建node_global和node_cache兩個文件夾

設置緩存文件夾

npm config set cache "C:\Program Files\nodejs\node_cache"

設置全局模塊存放路徑

npm config set prefix "C:\Program Files\nodejs\node_global"

設置成功後，以後用命令npm install XXX -g安裝之後模塊就在C:\Program Files\nodejs\node_global裏

3.安裝cnpm鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org

4.設置環境變量

系統變量添加NODE_PATH，路徑：C:\Program Files\nodejs\node_global\node_modules

修改用戶變量中path，添加路徑C:\Program Files\nodejs\node_global

驗證環境變量

node -v

npm -v

cnpm -v

若上述命令均能成功顯示版本信息，環境變量設置成功。

遇到以下錯誤信息

須要輸入以下語句解決：

set-ExecutionPolicy RemoteSigned

在提示菜單選擇時選擇A或者Y，再次輸入cnpm -v成功顯示版本信息。

​

5.安裝vue和vue-cli

cnpm install vue -g

cnpm install vue-cli -g

6.新建項目並運行測試

a.) cmd進入D:/Vue

b.) vue init webpack-simple demo

​

c.) 進入項目目錄 cd demo

d.) 安裝項目須要的依賴 npm install

此時會出現安裝node-sass失敗的錯誤提示，解決辦法以下：

1）先運行： npm install -g node-gyp

2）而後運行：運行 npm install --global --production windows-build-tools 能夠自動安裝跨平臺的編譯器：gym

3）執行npm uninstall node-sass，清除安裝錯誤的緩存

4）執行npm install node-sass從新安裝node-sass

5）從新執行npm install

e.) 運行項目 npm run dev

瀏覽器中http://localhost:8080/顯示vue頁面則代表vue開發環境安裝成功

7.安裝開發工具VS Code

安裝包下載地址： https://code.visualstudio.com/Download

VS Code開發Vue Project時經常使用插件