1. 下載node.js
在搭建vue的開發環境之前,先下載node.js,下載地址:https://nodejs.org/en/
https://blog.csdn.net/antma/article/details/86104068
2. 安裝
下載好后安裝,傻瓜式點下一步直到finish即可
https://blog.csdn.net/antma/article/details/86104068
3. 檢測安裝是否成功
安裝成功后,一般不需要自己手動去配置環境變量,此時可以在命令行輸入node -v 和 npm -v 分別查看node和npm的版本號;
4. 配置npm在安裝全局模塊時的路徑和緩存cache的路徑
在安裝路徑下新建兩個文件夾,分別為:node_global和node_cache
然后在命令行中執行如下兩個命令:(報錯時是因為權限不足,需要使用管理員身份打開cmd再運行下面命令)- npm config set prefix "C:\Program Files\nodejs\node_global"
- npm config set cache "C:\Program Files\nodejs\node_cache"
執行成功后:
https://blog.csdn.net/antma/article/details/86104068
然后在環境變量 -> 系統變量中新建一個變量名為 “NODE_PATH”, 值為“D:\Program Files\nodejs\node_modules”,如下圖:
最后編輯用戶變量里的Path,將相應npm的路徑改為:C:\Program Files\nodejs\node_global
配置完成!
5. 測試
在cmd命令下執行 npm install webpack -g 然后安裝成功后可以看到自定義的兩個文件夾已生效:
https://blog.csdn.net/antma/article/details/86104068
webpack 也已安裝成功,執行 npm webpack -v 可以看到所安裝webpack的版本號:
https://blog.csdn.net/antma/article/details/86104068
6. 在idea中導入vue項目並運行
setting-->plugins-->搜索vue-->選擇第一個-->installed
導入vue項目
然后選擇
package.json為當前項目目錄下的package.json文件,scripts 選擇 dev
繼續添加npm
前面一樣,scripts選擇bulid
選擇項目,點擊
雖然會報 Opening index.html over file:// won't work.這個錯誤,但是好像沒啥影響,在網上搜了一圈也沒搞清楚啥原因
點擊
輸入 npm run dev
運行結果