webstorm vue開發配置

1.安裝NODE.JS

nodejs.org,下載nodejs的安裝程序,一路安裝完成

2.安裝淘寶鏡像(類似於阿里雲的maven中央倉庫鏡像)

廢話少說,國外用的是npm,但是國內這個尿性,用淘寶的鏡像吧:打開終端,下面的複製粘貼回車

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

 

安裝完成 。終端回車以下命令驗證安裝

cnpm -v

 

3.安裝webpack

利用cnpm安裝webpack 命令行語句爲cnpm install webpack -g  。時間略長。測試安裝成功的界面如下:

 

4.接下來就是全局安裝vue-cli。時間略長

安裝語句爲:cnpm install --global vue-cli

驗證命令:vue -V (V要大寫)

 

5.下面開始使用WebStorm

重要的一點,想用WebStorm創建項目得安裝git。 安裝很簡單,官網找到下載安裝即可,否則可能出現安裝不了的情況

 

紅色爲新建的順序,綠色爲node.js地址(裝好了會自動尋找),藍色爲vue.js包的地址,黃色爲打包所用的打包模塊

填寫項目名,注意項目名中不能包含大寫字母。

一直點下一步就可以了,項目結構

 

選中package.json 右鍵選擇 show npm scripts

選擇dev雙擊 即可進行測試。開啓成功後會出現默認的端口,贊帖到瀏覽器中打開,出現下面頁面就是成功啦。這樣一個vue項目就創建成功了,如果右下角出現 npm install的提示,不要點擊安裝。採用cnpm的手動安裝方式進行安裝。npm太慢了。

 

命令行cd 到項目目錄,你會發現沒有node_modules文件夾,此時手動cd到此目錄,執行cnpm install命令,完成後,就會出現此文件夾。再進行運行,搞定

cd /d xxxxxx

執行cnpm install

以上教程根據以下博客操作,進行記錄。謝謝各位。

http://www.javashuo.com/article/p-xjgfqshp-pn.html