把 vue3 項(xiàng)目降級(jí)到 vue2 ??

原項(xiàng)目為 vue3 + vite + element-plus + pinia + vue-router + typescript 構(gòu)建

降級(jí)后為 vue2.7 + vite + element-ui + pinia + vue-router + typescript

為什么要降級(jí)到 vue2 ？

• 兼容性問(wèn)題：公司基于 element-ui 開(kāi)發(fā)了自己的一套 ui 組件，并且還有基于 vue2 開(kāi)發(fā)的中臺(tái)組件。由于現(xiàn)有的組件庫(kù)都是基于 vue2 開(kāi)發(fā)的，完全不兼容 Vue 3。
• 學(xué)習(xí)成本：團(tuán)隊(duì)中的開(kāi)發(fā)人員可能需要花費(fèi)大量時(shí)間來(lái)學(xué)習(xí) Vue 3 的新功能。??
• 項(xiàng)目需求：項(xiàng)目需求中需要 Vue 3 的新功能的部分我們可以使用 vue2.7 來(lái)替代。
• vue3 無(wú)法兼容 IE10 瀏覽器（雖然覺(jué)得沒(méi)必要考慮這個(gè)，但是種種原因...??

考慮到上面幾點(diǎn)，我想了幾個(gè)方法 ??：

• 微前端：考慮過(guò) qiankun 和 micro-app，但是由于 ui 組件使用的是 vue2 開(kāi)發(fā)所以無(wú)法兼容
• ui 組件庫(kù)+中臺(tái)組件庫(kù) 升級(jí)到 vue3 版本：工程量太大被拒絕
• 降級(jí)項(xiàng)目到 vue2.7：改動(dòng)較小，邏輯基本無(wú)需改動(dòng)。成本可控

vue3 和 vue2 的依賴(lài)

vue3 所需依賴(lài)

    ...  // 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 所需依賴(lài)

    ... //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庫(kù) 這里用element-ui代替

想要把 vue3 的項(xiàng)目降級(jí)到 vue2，我們先看下上面的依賴(lài)，

• vue 肯定是需要改動(dòng)的
• vue-router 也是需要改動(dòng)：vue-router 默認(rèn)版本是@4 但是 vue-router@4 只能支持 vue3，以及為了避免更多的問(wèn)題，所以我們需要改為 vue-router@3 版本。

對(duì)比 vue3 和 vu2 的區(qū)別

• 響應(yīng)式區(qū)別：vue3 使用 proxy 代理，vue2 使用 Object.defineProperty()
• 選項(xiàng)式 API 和組合式 API
• 生命周期不同

這里只簡(jiǎn)單說(shuō)明，不做重點(diǎn)

實(shí)踐步驟

• vue 降級(jí)
• vue-router降級(jí)
• 組件庫(kù)降級(jí)
• pinia或者vuex
• eslint等工程化

vue 降級(jí)

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");

vue-router 降級(jí)

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"),
    
  },
  ...
];

element-ui

因?yàn)?element-plus 是使用vue3重寫(xiě)的組件，所以無(wú)法應(yīng)用在vue2的項(xiàng)目中，所以需要重寫(xiě)安裝 element-ui

npm i element-ui

值得慶幸的是，如果你使用的是 element-ui ，那么你的改動(dòng)會(huì)很少，element-plus和element-ui的組件名保持了一致，并且大多數(shù)的方法名和屬性也都保持了一致。

pinia

官方說(shuō)明

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 的注釋?zhuān)员?Vue 2 和 Vue 3 用戶(hù)可以閱讀！

同樣 pinia 作為 vuex 的第五代版本，也是完全兼容vue2和vue3的，所以這部分你也基本不用改動(dòng)。

eslint + husky + prettier + typescript

值得注意的是 elint 在使用vue3的擴(kuò)展和vue2是不同的，所以不能直接復(fù)制粘貼

其他的交驗(yàn)倒是沒(méi)發(fā)現(xiàn)什么問(wèn)題

問(wèn)題/缺陷

• 使用vite 構(gòu)建的話(huà) federationPlugin 和 plugin-legacy 會(huì)有沖突，暫時(shí)無(wú)法解決

總結(jié)

總體來(lái)說(shuō)，讓vue3的項(xiàng)目降級(jí)到vue2是不需要重寫(xiě)的，我們可以盡量的控制修改的代價(jià)。

我們需要注意以下幾個(gè)地方

• vue-router 的語(yǔ)法和版本
• vue 的語(yǔ)法和版本
• ui組件庫(kù)的兼容性和標(biāo)簽，屬性，方法
• eslint的擴(kuò)展問(wèn)題

雖然vue3給我們的開(kāi)發(fā)提供了高效，便利的一方面，但是我們?cè)趯?shí)踐中還是要考慮到公司的開(kāi)發(fā)環(huán)境和原有的公共庫(kù)，做好調(diào)查。避免給其他開(kāi)發(fā)人員帶來(lái)不必要的麻煩。

到此這篇關(guān)于vue3.x項(xiàng)目降級(jí)到vue2.7的文章就介紹到這了,更多相關(guān)vue3.x項(xiàng)目降級(jí)vue2.內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論