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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM