您好,登錄后才能下訂單哦!
今天小編給大家分享一下vue3.x項(xiàng)目降級(jí)到vue2.7如何解決的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
原項(xiàng)目為 vue3 + vite + element-plus + pinia + vue-router + typescript 構(gòu)建
降級(jí)后為 vue2.7 + vite + element-ui + pinia + vue-router + typescript
兼容性問題:公司基于 element-ui
開發(fā)了自己的一套 ui 組件,并且還有基于 vue2 開發(fā)的中臺(tái)組件。由于現(xiàn)有的組件庫都是基于 vue2 開發(fā)的,完全不兼容 Vue 3。
學(xué)習(xí)成本:團(tuán)隊(duì)中的開發(fā)人員可能需要花費(fèi)大量時(shí)間來學(xué)習(xí) Vue 3 的新功能。????
項(xiàng)目需求:項(xiàng)目需求中需要 Vue 3 的新功能的部分我們可以使用 vue2.7 來替代。
vue3 無法兼容 IE10 瀏覽器(雖然覺得沒必要考慮這個(gè),但是種種原因...????
考慮到上面幾點(diǎn),我想了幾個(gè)方法 ????:
微前端:考慮過 qiankun 和 micro-app,但是由于 ui 組件使用的是 vue2 開發(fā)所以無法兼容
ui 組件庫+中臺(tái)組件庫 升級(jí)到 vue3 版本:工程量太大被拒絕
降級(jí)項(xiàng)目到 vue2.7:改動(dòng)較小,邏輯基本無需改動(dòng)。成本可控
vue3 所需依賴
... // other "vue": "^3.2.31", "vue-router": "^4.0.10", "pinia": "^2.0.13", "vite": "^2.9.1", "vue-tsc": "^0.33.9" "prettier": "^2.6.2", "element-plus": "^2.1.8",
vue2 所需依賴
... //other "vue": "2.7.5", "vue-router": "^3.5.4" "pinia": "^2.0.14", "vite": "^2.9.9", "vue-tsc": "^0.39.5", "prettier": "^2.7.1", "element-ui": "x.x.x" // 因?yàn)楣居凶约旱膗i庫 這里用element-ui代替
想要把 vue3 的項(xiàng)目降級(jí)到 vue2,我們先看下上面的依賴,
vue 肯定是需要改動(dòng)的
vue-router
也是需要改動(dòng):vue-router
默認(rèn)版本是@4 但是 vue-router@4 只能支持 vue3,以及為了避免更多的問題,所以我們需要改為 vue-router@3 版本。
響應(yīng)式區(qū)別:vue3 使用 proxy
代理,vue2 使用 Object.defineProperty()
選項(xiàng)式 API 和組合式 API
生命周期不同
這里只簡單說明,不做重點(diǎn)
vue 降級(jí)
vue-router降級(jí)
組件庫降級(jí)
pinia或者vuex
eslint等工程化
npm i vue@2.7.5
將 vue3 的 createApp() 改為 vue.use()
// vue3 import { createApp } from "vue"; const app = createApp(App); app.use("xxx"); // vue2 import Vue from "vue"; vue.use("xxx"); new Vue({ //... }).$mount("#app");
npm i vue-router@3.6.5
將vue-router@4.x.x 降級(jí)到 @3.x.x
// vue3 + vue-router4 import { createWebHashHistory, createRouter, } from 'vue-router' export const constantRoutes = [ { path: 'xxx', component: xxx, name: 'xxx', meta: { hidden: true, }, children: [ { path: '/xxx', component: () => import('xxx'), }, ], }, ... ] const router = createRouter({ history: createWebHashHistory('/admin'), routes: constantRoutes, })
// vue2.7+ vue-router3 import VueRouter from "vue-router"; export const router = new VueRouter({ scrollBehavior: () => ({ x: 0, y: 0 }), mode: "hash", routes: constantRoutes, }); export const constantRoutes = [ { path: "/xxx", name: "xxx", component: () => import("xxx"), }, ... ];
因?yàn)?element-plus
是使用vue3重寫的組件,所以無法應(yīng)用在vue2的項(xiàng)目中,所以需要重寫安裝 element-ui
npm i element-ui
值得慶幸的是,如果你使用的是 element-ui
,那么你的改動(dòng)會(huì)很少,element-plus
和element-ui
的組件名保持了一致,并且大多數(shù)的方法名和屬性也都保持了一致。
官方說明
Pinia 最初是在 2019 年 11 月左右重新設(shè)計(jì)使用 Composition API 。從那時(shí)起,最初的原則仍然相同,但 Pinia 對(duì) Vue 2 和 Vue 3 都有效,并且不需要您使用組合 API。 除了安裝和 SSR 之外,兩者的 API 都是相同的,并且這些文檔針對(duì) Vue 3,并在必要時(shí)提供有關(guān) Vue 2 的注釋,以便 Vue 2 和 Vue 3 用戶可以閱讀!
同樣 pinia
作為 vuex
的第五代版本,也是完全兼容vue2和vue3的,所以這部分你也基本不用改動(dòng)。
值得注意的是 elint
在使用vue3的擴(kuò)展和vue2是不同的,所以不能直接復(fù)制粘貼
其他的交驗(yàn)倒是沒發(fā)現(xiàn)什么問題
使用vite 構(gòu)建的話 federationPlugin
和 plugin-legacy
會(huì)有沖突,暫時(shí)無法解決
以上就是“vue3.x項(xiàng)目降級(jí)到vue2.7如何解決”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。