准備
1：webstorm的安裝(友情博客鏈接)：
https://www.cnblogs.com/hskw/p/9294860.html
https://www.cnblogs.com/pwj2lgx/p/11578995.html
2：node.js的安裝:
請在官網下載最新的版本:https://nodejs.org/zh-cn/download/current/
3：vue-cli
4. Webstorm 快速啟動Vue項目配置
步驟
webstorm的安裝及破解 (請參考鏈接博客)
node.js的安裝
1.直接雙擊運行nodejs的下載文件*.msi,一路next,一直到選擇安裝模式下停止
2.vue項目選擇最后一個,默認安裝以上所有
3.點擊next,然后install即可(需要等一會)
4.檢查node.js安裝完成,打開cmd,輸入指令
5.以上node.js的安裝就完成了,但是為了后面的方便使用,此處需要配置一些nodeJS的使用配置
5.1 打開node.js的安裝目錄,配置及指定之后npm的全局緩存目錄(放到此安裝目錄D盤中),避免之后占用C盤空間
5.2 創建兩個空目錄
5.3 打開cmd命令行,運行
1 npm config set prefix "D:\Program Files\nodejs\node_global" 2 npm config set cache "D:\Program Files\nodejs\node_cache"
5.4 接下來設置環境變量，“我的電腦”-右鍵-“屬性”-“高級系統設置”-“高級”-“環境變量”
5.5 npm install express -g ,測試一下
vue-cli
0.安裝淘寶鏡像
1、打開cmd，輸入命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝Vue需要npm的版本大於3，所以我們先升級一下npm，輸入命令
cnpm install cnpm -g
安裝vue，輸入命令
cnpm install vue
安裝vue-cli，輸入命令
cnpm install --global vue-cli
1.打開命令行輸入安裝命令:npm install -g vue-cli
2.安裝后測試一下是否安裝成功或者vue -V,注意V是大寫
Webstorm快速啟動Vue項目配置
1.添加npm到Webstorm
2. 在Webstorm->view->Tool windows->Terminal下輸入node -v,如果出現版本號,恭喜你不用配置,如果沒有需要進行以下操作
在webstorm里配置nodejs環境,然后注意 重啟!!!
如果此步驟配置完成,Webstorm中還是不能查到版本號,請重啟電腦!!!
--------------------------------------------------------------------------------------------------------------------------------------------以上環境的配置就完成了
【報錯 】
1. ERROR :命令行新建項目
在命令行輸入 vue init webpack myProVue 創建myProVue 的項目時報錯
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:968:3
報錯原因:node的版本過低,升級版本
解決方案:
1.先檢查npm和node的版本
查看npm版本：npm -v
升級npm： npm install -g npm
查看node版本：node -v
升級node版本：https://nodejs.org/ 官網現在下載最新的node安裝
2.卸載vue-cli
npm uninstall -g vue-cli
3.重新安裝vue-cli
npm install -g vue-cli
4.踩坑記
4.1 webstorm是前端調試工具,需要部署到服務器上運行,不能實現自動部署,需要手動部署,部署到遠程和本地是一樣的步驟
部署教程,請參考:https://blog.csdn.net/prrety_girl/article/details/79518663
4.2 IDEA是后台管理連接服務器的強大的集成工具,是代替了eclipes和myeclipes等后台代碼編寫及服務器部署管理的強大工具
IDEA與webstorm的服務器是分開的,IDEA是一體化集成,wenstorm需要將前端css等這些代碼手動部署到服務器之后,手動啟動服務器之后,才能進行預覽的.即打開html界面,點擊左上角的瀏覽器的這些圖標,打開瀏覽器預覽
4.3 還需要注意一點,webstorm 僅僅能顯示當前頁面的改動情況,視覺效果的改動,想要進行js調試 是不行的 !!!!! 所以只限於打開頁面,不能進行頁面的跳轉及其他處理
(如果要進行調試,需要部署到遠程服務器上,在瀏覽器上調試.服務器部署請參開4.1)
---------大家看一下下面的這個配置,應該也能看出來幾分,僅僅是單個頁面的調試
開始一個新項目
1. webstorm新建一個vue項目
2.
1).npm install -g vue-cli 先安裝vue
2).vue init webpack my-project 創建項目框架
3).npm install 安裝項目依賴
4).npm run dev 運行測試環境