這可能是你看過最詳細的NodeJS安裝配置教程

Java小學生丶發表於2021-11-21

博主是一枚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_globalnode_cache兩個資料夾

然後執行命令將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"

配置環境變數

接下來開始進行比較重要的配置環境變數環節:

  1. 使用者變數中的Path變數中新增剛剛建立的node_global地址,未來安裝的所有依賴都會裝在global中,通過該環境變數可以直接執行命令

  1. 在系統變數中新建NODE_PATH變數,變數值為NodeJS自帶的node_modules目錄

  1. 在系統變數中的Path變數中新增NodeJS的安裝目錄,如果你使用的是smi安裝程式安裝的NodeJS,那麼這個變數會自動新增進去,如果沒有的話就手動新增

上面三個步驟走完之後,環境變數就配置完成了,可以檢視安裝的版本號來校驗是否安裝成功

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

這樣就得出了一個結論:通過npm將依賴安裝在node_global,然後因為環境變數所以可以直接呼叫,為了驗證這個結果是否正確,我們將node_global目錄中安裝好的依賴複製一份出來,複製時需要注意依賴的目錄結構,如下圖所示

global目錄在安裝的依賴過多時會有很多檔案,這裡只有cnpm是因為目前只安裝了cnpm,複製依賴時一定要注意只複製與當前依賴相關的檔案,且記住檔案目錄結構

複製完成後我們通過NPM移除剛剛安裝的cnpm依賴包,然後校驗是否刪除成功

現在我的電腦就是一臺沒有安裝過cnpm的電腦了,現在我在將global目錄建立回來,將剛剛複製出來的依賴按照正確的目錄結構重新放回去,然後我們看看效果

通過備份複製的方式安裝cnpm依賴測試成功!而複製出來的cnpm資料夾我將他稱之為離線版的依賴

我會在文章結尾將本文中安裝過的所有依賴打包為離線版的依賴,所以如果你安裝失敗也不要心急,下載我分享的離線版依賴就可以直接使用啦!不過NodeJS版本最好與我保持一致,跨版本的依賴拷貝我還沒有嘗試過

安裝源管理器

有了cnpm後安裝依賴會快很多,但是之間受過前輩指教,cnpm安裝的依賴包結構和npm安裝的依賴的包結構不一致,而且有些依賴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時選擇版本的命令

# 安裝vue腳手架,這個命令預設會安裝最新版的vue腳手架
npm install -g @vue/cli
# 安裝vue腳手架,這個命令預設安裝vue3之前最高的版本,也就是vue2的最高版本
npm install -g vue-cli

將npm的源修改為taobao後,30秒左右完成了vue-cli的安裝,這個速度我還是很滿意的

然後測試建立一個vue專案,過程就不細說了,畢竟這不是vue的教程,看結果就好了:

收尾

好了,到這裡NodeJS的安裝配置基本就完成了,其實使用NodeJS還有一個坑,不過不知道為什麼這次沒遇到...那既然沒遇到的話就先不說了哈哈哈哈

最後將本文涉及到的離線版依賴連結放在這裡,藍藍的連結點選下載即可

相關文章