一、安裝vue3
此處建立在已經按正常流程全局安裝好vue2版本的情況下,老項目需要使用vue2運維,新項目使用vue3開發,因此需要兩種環境共存。
找一個合適的位置,新建一個文件夾,在該文件夾目錄下,打開cmd終端,運行命令:
npm install @vue/cli --registry=https://registry.npmjs.org/
命令裏不要帶"-g",此處安裝不要使用全局安裝。
後綴使用的是--registry=https://registry.npmjs.org/,即npm默認鏡像,主要是之前使用淘寶鏡像時卡在reify:rxjs: timing reifyNode: node_modules/@vue/cli/node_modules時無法往後繼續進行,具體還是根據自己的實際情況看用哪個。
安裝完成如下:
二、修改文件
在安裝目錄的node_modules\.bin文件夾下,找到vue和vue.cmd文件,改爲vue3和vue3.cmd(與vue2進行區分):
三、配置環境變量
從控制面板中找到"系統",點擊高級系統配置,進入環境變量配置頁面:
配置vue3環境,將其安裝目錄下的.bin文件夾所在絕對路徑填入:
再將配置的vue3變量添加到path裏,使用%首尾中間加變量名即可:
四、環境測試
分別使用vue -V和vue3 -V查看版本:
五、創建項目
使用vite創建一個測試項目:
npm create vite@latest
提示詞含義:
Project name:項目名稱,根據自己需要手輸即可。
Select a framework:選擇一個框架,會給出幾個選項,這裏選vue就行了。
Select a variant:創建方式,Customize with create-vue爲常規創建,根據自己需要選擇。
Add TypeScript?:是否需要添加typescript,根據自己需要選擇。
Add JSX Support?:是否需要添加JSX語法,根據自己需要選擇。
Add Vue Router for Single Page Application development?:是否添加vue-router,根據自己需要選擇。
Add Pinia for state management? :是否添加Pinia作爲狀態管理器,根據自己需要選擇。
Add Vitest for Unit Testing? :是否添加Vitest進行單元測試,根據自己需要選擇。
Add an End-to-End Testing Solution?:是否添加端對端測試,根據自己需要選擇。
Add ESLint for code quality?:是否添加ESLint代碼檢查工具,根據自己需要選擇。
Add Prettier for code formatting? :是否添加Prettier進行代碼格式化,根據自己需要選擇。