Vue.js框架:vue2和vue3開發環境共存

一、安裝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文件夾下,找到vuevue.cmd文件,改爲vue3和vue3.cmd(與vue2進行區分):

  

三、配置環境變量

  從控制面板中找到"系統",點擊高級系統配置,進入環境變量配置頁面:

  

  

  配置vue3環境,將其安裝目錄下的.bin文件夾所在絕對路徑填入:

  

  再將配置的vue3變量添加到path裏,使用%首尾中間加變量名即可:

  

四、環境測試

  分別使用vue -Vvue3 -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進行代碼格式化,根據自己需要選擇。

  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章