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時常用插件