博主是一枚Java菜雞,今天在B站上看一些教程視頻的時候偶爾看了一眼評論區,發現好多人在Node和Vue安裝的位置卡住了,便決定寫出一套詳細的NodeJS安裝配置的教程
本文適合初次接觸NodeJS的前端/后端程序員,博主本身也是后端程序員,對NodeJS了解其實並不算太多,只是將自己的經驗和踩過的坑分享出來,如有錯誤請評論區指正我馬上回來改!!!
[多圖警告] 致力於詳細,我會在新系統(Windows10虛擬機)中在不使用代理的情況下操作,全程遇到問題都會進行記錄
NodeJS的下載安裝以及配置
下載NodeJS以及版本推薦
下載NodeJS可以去往他的官網進行下載
# NodeJS官網
https://nodejs.org/en/
# NodeJS中文官網
http://nodejs.cn/
進入到首頁后跳轉到下載頁面,選擇操作系統后就開始下載了
如果不想下載最新版的,也可以直接在百度上查關鍵字NodeJS以往的版本
進行下載
我個人推薦使用10.16.3
這個版本,點擊下載
點擊下載按鈕會跳轉到這個頁面,這里我選擇windows64位的zip壓縮文件安裝,你們隨意
這里推薦一個下載小技巧,如果瀏覽器下載太慢的話,可以取消下載后將下載鏈接復制到迅雷中,迅雷的下載還是很Nice的
對於那些下載依舊很慢的,這里給出藍奏網盤的下載地址,點擊下載即可
文件下載完成后,找個目錄將文件進行解壓即可
配置環境變量和初始化操作
NodeJS安裝時包含NPM的,而NPM是包管理工具,用於依賴的下載安裝和管理,那么下載安裝的依賴總要有一個位置存儲,我個人習慣將文件都放在NodeJS安裝目錄下,在NodeJS安裝目錄創建node_global
和node_cache
兩個文件夾
配置環境變量
接下來開始進行比較重要的配置環境變量環節:
- 在用戶變量中的
Path
變量中添加剛剛創建的node_global
地址,未來安裝的所有依賴都會裝在global中,通過該環境變量可以直接執行命令
- 在系統變量中新建
NODE_PATH
變量,變量值為NodeJS自帶的node_modules
目錄
- 在系統變量中的
Path
變量中添加NodeJS的安裝目錄,如果你使用的是smi安裝程序安裝的NodeJS,那么這個變量會自動添加進去,如果沒有的話就手動添加
上面三個步驟走完之后,環境變量就配置完成了,可以查看安裝的版本號來校驗是否安裝成功
初始化操作
執行命令將NPM默認的目錄修改為剛剛創建的這兩個目錄
npm config set prefix "C:\Files\node-v10.16.3-win-x64\node_global"
npm config set cache "C:\Files\node-v10.16.3-win-x64\node_cache"
NPM推薦設置
關閉快速編輯模式
這里順便推薦大家關閉cmd窗口默認的快速編輯模式,在cmd窗口上右鍵編輯關閉即可,在開啟快速編輯的情況下不小心點到窗口就會停止運行,需要回車后才可以繼續,而且回車相當於復制選中的內容,剪切版的內容就會被替換
安裝cnpm
由於NPM源默認是國外的地址,所以我們在下載依賴包的過程非常慢,所以一般都會安裝cnpm
來代替NPM進行依賴安裝
# install代表安裝,-g代表全局安裝,--registry后面跟上url代表使用淘寶的源
npm install -g cnpm --registry=https://registry.npm.taobao.org
稍等片刻后就會安裝成功,我們可以在之前創建的node_global
目錄中看到這個依賴
然后我們來驗證cnpm是否安裝成功,只要打印出版本號就說明安裝成功
到了這里如果仍由於網絡原因導致連cnpm也安裝不了的話,你也先不要急,我會幫你解決,耐心往下看
提取離線版的依賴
為什么直接在控制台直接輸入cnpm -v
就能調用?捋一下npm安裝依賴以及調用的過程:
首先執行npm install -g xxx
的命令全局下載依賴,下載的依賴就會安裝到之前配置好的node_global
目錄中,而后又由於node_global
配置好了環境變量,所以我們通過cnpm -v
可以直接調用到node_global
目錄下的cnpm.cmd
這樣就得出了一個結論,為了驗證這個結論是否正確,我們將node_global
目錄中安裝好的依賴復制一份出來,復制時需要注意依賴的目錄結構,如下圖所示
global目錄在安裝的依賴過多時會有很多文件,這里只有cnpm是因為目前只安裝了cnpm,復制依賴時一定要注意只復制與當前依賴相關的文件,且記住文件目錄結構
復制完成后我們通過NPM移除剛剛安裝的cnpm依賴包,然后校驗是否刪除成功
現在我的電腦就是一台沒有安裝cnpm的電腦了,現在我在將global目錄創建回來,將剛剛復制出來的依賴按照正確的目錄結構重新放回去,然后我們看看效果
通過備份復制的方式安裝cnpm依賴測試成功!而復制出來的cnpm文件夾我將他稱之為離線版的依賴
我會在文章結尾將本文中安裝過的所有依賴打包為離線版的依賴,所以如果你安裝失敗也不要心急,下載我分享的離線版依賴就可以直接使用啦!不過NodeJS版本最好與我保持一致,跨版本的依賴拷貝我還沒有嘗試過
安裝源管理器
有了cnpm后安裝依賴會快很多,但是之間受過前輩指教,部分npm安裝的依賴和cnpm安裝的依賴目錄結構可能不一致,這也就代表着同一個項目中npm和cnpm混着用會有報錯的風險,而且有些依賴cnpm下不到只能通過npm安裝,所以我個人並不使用cnpm,但是npm在不掛代理的情況下的確很慢,這里推薦使用nrm源管理器
# 安裝nrm源管理器,注意install可以縮寫為字母 i
cnpm i nrm -g
安裝成功后可以發現node_global
目錄中新增了nrm.cmd的文件,調用測試后也發現安裝成功
nrm
安裝好后,只需要記住他的兩個命令就可以了,一個是ls
,另一個是use
,使用方法如圖所示:
選擇淘寶作為npm的源后,npm的速度就會比之間快很多,如有需要可隨時切換回去
# 切換回npm原本的下載源地址
nrm use npm
nrm和cnpm二者並不沖突,可以同時安裝他們兩個,但是不建議混着使用,平時只使用某一個,另一個作為備用
測試安裝Vue腳手架
這里分享一下百度找到的關於安裝vue時選擇版本的命令
# 設置這個是為了防止后續卡在downloading template位置
npm config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver
# 安裝vue腳手架,這個命令默認會安裝最新版的vue腳手架
npm install -g @vue/cli
# 安裝vue腳手架,這個命令默認安裝vue3之前最高的版本,也就是vue2的最高版本
npm install -g vue-cli
將npm的源修改為taobao后,30秒左右完成了vue-cli的安裝,這個速度我還是很滿意的
然后測試創建一個vue項目,過程就不細說了,畢竟這不是vue的教程,看結果就好了:
收尾
好了,到這里NodeJS的安裝配置基本就完成了,其實使用NodeJS還有一個坑,不過不知道為什么這次沒遇到...那既然沒遇到的話就先不說了哈哈哈哈
整理博客不易,完全是從安裝虛擬機開始進行的,歷經一個多上午才弄好,幫到你的話就點個贊吧~
最后將本文涉及到的離線版依賴鏈接放在這里,藍藍的鏈接點擊下載即可
后續更新會在這里給出地址