vue2.0和vue3.0同時使用

倾听-静轩水月發表於2024-06-04

背景:原先電腦上安裝了vue2.0和node 14.17.6版本,後面新專案使用的是vue3.0和node 16.6.1。透過nvm 安裝node 16.6.1的時候,不小心把原來的2.0環境給搞壞了。

目的:本文將透過文字描述(都是cmd命令,截圖感覺沒啥意義)的方式,講述解除安裝和安裝多版本node的vue環境

前言:步驟中所有的命令都透過cmd(以管理員身份啟動)執行

一、先解除安裝原來的版本

1、透過控制皮膚,解除安裝nodejs。(如果原來有安裝,使用 node -v 檢查)

2、透過 nvm list 檢查安裝的node版本。如果有,使用 nvm uninstall 版本號來解除安裝指定版本。要把所有的都解除安裝完

3、透過 nvm 安裝目錄下的解除安裝程式檔案解除安裝 nvm

4、刪除原來配置的所有相關目錄,包括 node_cache,node_global,node_modules 等

5、檢查 c:/users/administartor/.npmrc 檔案,如果有,確保配置正確。如果沒有,則忽略這一步。我這邊的配置如下

 cache=E:\node.js\nodejs\node_cache
 prefix=E:\node.js\nodejs\node_global
 python=E:\node.js\python-install\python.exe
 registry=https://registry.npmmirror.com

前面5點很重要,其中一點不對,都有可能導致後面的錯誤

二、安裝 nvm

1、配置環境變數

  在使用者變數那邊配置下面這三個路徑

變數:NODE_PATH,值:E:\node.js\nodejs\node_modules 這個是node庫路徑

變數:NVM_HOME,值:E:\node.js\nvm-install       這個是nvm安裝路徑

變數:NVM_SYMLINK,值:E:\node.js\nodejs       這個是node安裝路徑

 在系統變數那邊配置

變數:NVM_HOME,值:E:\node.js\nvm-install       這個是nvm安裝路徑

變數:NVM_SYMLINK,值:E:\node.js\nodejs       這個是node安裝路徑

  然後在 Path 中把變數名加上去

2、雙擊nvm安裝檔案,進行安裝,指定安裝位置 (E:\node.js\nvm-install) 和nodejs的位置 (E:\node.js\nodejs),這個路徑上下文要統一

 安裝完成後,要重新開啟 cmd 命令,因為直接使用 nvm 會提示不存在

3、使用 nvm install 版本號 命令,安裝對應nodejs版本,我這邊使用的是 14.17.6 和 16.6.1。安裝過程需要一點時間

4、使用 nvm use 版本號指定使用的node版本。這步過程很重要,不然下面的命令會提示找不到

5、npm config set registry https://registry.npmmirror.com 使用這個命令安裝映象源

6、此時使用vue命令會提示找不到此命令,使用 npm install -g @vue/cli 命令安裝vue命令

7、這一步很重要:在系統變數的 Path 中配置環境變數 E:\node.js\nodejs\node_global,不然會提示找不到node命令

8、現在可以使用 vue create 來建立專案,會提示選擇使用vue2.0還是vue3.0,可以使用↑↓來選擇

相關文章