如何在Window下安裝node\npm\cnpm,並安裝vue.js,創建項目


1、安裝node.js
node.js的官方地址為: https://nodejs.org/en/download/
根據windows版本后,選擇要下載的安裝包,下載完畢,按照windows一般應用程序,一路next就可以安裝成功,建議不要安裝在系統盤(如C:)。
 
2、設置global和cache路徑
設置路徑能夠把通過npm安裝的模塊集中在一起,便於管理。
(1)在nodejs的安裝目錄下,新建node_global和node_cache兩個文件夾,如安裝目錄為“D:\nodejs\”
(2)用命令npm config set prefix "D:\nodejs\node_global"和npm config set cache "D:\nodejs\node_cache"設置global和cache,設置成功后,后續用命令npm install -g XXX安裝,模塊就在D:\nodejs\node_global\node_modules里。
 
3、設置環境變量
說明:設置環境變量可以使得住任意目錄下都可以使用cnpm、vue等命令,而不需要輸入全路徑。
(1)修改用戶變量PATH:把"D:\nodejs\node_global"加到后面。
(2)新增系統變量NODE_PATH:設置成“D:\nodejs\node_global\node_modules”。
 
4、安裝cnpm
說明:由於許多npm包都在國外,用淘寶的鏡像服務器,對依賴的module進行安裝。
參考網址為: http://npm.taobao.org/
安裝命令為:npm install -g cnpm --registry=https://registry.npm.taobao.org
5、用cnpm安裝vue
安裝命令為:cnpm install vue -g
 
安裝好后碰到一個問題
cmd命令下cnpm顯示不是內部命令,其實走了那么多彎路,就是因為將其文件的在--2、設置global和cache路徑中改變了

npm所在目錄C:\Program Files\nodejs   和D:\Program Files\nodejs\node_modules\npm

cnpm所在目錄C:\Program Files\nodejs\node_global和D:\Program Files\nodejs\node_global\node_modules\cnpm

所以在設置一下環境變量就可以解決問題的,一直搞不明白,原因就在這

添加安裝cnpm文件的目錄路徑就可以, 比如:C:\Program Files\nodejs\node_global

就okl

 
6、安裝vue命令行工具
安裝命令為:cnpm install vue-cli -g
7、創建工程
(1)cd命令進入將要新建工程的目錄,如“E:\nodejs”
用命令"vue init webpack mytest"創建一個基於 webpack 模板的新項目,工程名為"mytest"。
(2)cd命令進入mytest目錄
(3)安裝該工程依賴的模塊
用命令"cnpm install”安裝該工程依賴的模塊,這些模塊將被安裝在:mytest\node_module目錄下,node_module文件夾會被新建,而且根據package.json的配置下載該項目的modules。

(這里用國內的阿里的cnpm安裝比較快)

 

(4)運行項目
用命令“cnpm run dev”測試該項目是否能夠正常工作,用nodejs來啟動。
 

 

然后,就自動在瀏覽器運行了項目了

 


免責聲明!

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



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