win下 vue-cli2 和 vue-cli3 并存,一起使用
文章目錄
????????win下 vue-cli2 和 vue-cli3 并存,一起使用
????????安裝vue-cli版本
????????檢驗安裝是否成功
????????修改vue2和vue3的名稱
????????配置環境變量
????????????打開環境變量所在位置
????????????新建系統變量
????????????最后修改Path變量
????????最后。重啟電腦就行了
版本號對應:
Vue CLI 4.5以下,對應的是Vue2
Vue CLI 4.5及以上,對應的是Vue3,當然,創建項目的時候可以選擇Vue2
3.0以下版本
npm install vue-cli@版本號
3.0以上版本
npm install @vue/cli@版本號
vue2和vue3命令,分別代表了 vue cli 4.5以下??和? vue cli 4.5及以上? 的運行環境,是可以同時在一臺電腦并存,使用,而且最重要的是,不用安裝在C盤!
如果你已經安裝了一個vue的版本,那可以使用本文的方法,在追加一個版本
既然要安裝2個vue版本,那肯定要想下載對應的2個版本先,我的電腦是沒安裝過vue的環境的,所以這里我就在F盤隨便找個地方,安裝vue2和vue3
安裝vue-cli4的最新版本
????注意不要加 -g 加了就是全局安裝了
????vue-cli4我是安裝在了vue3文件夾下的
????執行: npm install @vue/cli
安裝vue/cli 3.12.1版本
? ? 我安裝在vue2文件夾下面
????執行:npm install @vue/cli@3.12.1
????當然你們也可以指定自己想要的版本
檢驗安裝是否成功
安裝vue-cli后,會在當前目錄下有一個 node_modules 的文件夾。這也就是局部安裝vue所需要的模塊的文件
那么怎么檢驗呢:
vue-cli3檢驗
在vue3的目錄下執行:./node_module/.bin/vue -v
這里需要注意的是:不要用cmd。最起碼。找個趁手的命令行工具。。
看到執行結果都OK。都顯示了對應的版本號。到這里就說明 vue-cli3.x和vue-cli4.x 局部安裝成功了
修改vue2和vue3的名稱
接下來,找到安裝vue的目錄,然后找到 vue 和 vue.cmd 的位置。分別改名為 vue2 vue2.cmd 和 vue3 vue3.cmd
目錄和對應的文件名不要搞錯
配置環境變量
打開環境變量所在位置
右鍵我的電腦-屬性-高級系統設置-環境變量
新建系統變量
對應的輸入變量名和文件目錄
這里的目錄就是我們安裝vue的目錄,而且找到.bin文件夾就可以了。
vue2和vue3不要弄混了。看圖好理解
最后修改Path變量
這一步才是最重要的
先找到Path的位置(這個不能新建,每臺電腦都有的)、然后編輯
win10電腦下就直接在空白欄雙擊,然后填入剛才我們設置的變量名、注意有 %%包著的
如果不是win10的電腦
編輯Path的時候。可以移到路徑的輸入框的最后面
然后輸入 ;%VUE_CLI2%;%VUE_CLI3%
【重點】 win10以下的電腦環境變量是以 ; 分開的,所以不要漏了
最后。重啟電腦就行了
修改環境變量后,要重啟電腦才能生效。
如果按照流程走。那最后輸入 vue2 和 vue3 就能看到我開頭的圖的效果了。意味著你的電腦 vue2和vue3版本同時存在,并且可以全局調用了!