Solution to downgrade the project to vue2.7

Downgrade the vue3 project to vue2 ⬇️

The original project is built as vue3 + vite + element-plus + pinia + vue-router + typescript

After downgrading it to vue2.7 + vite + element-ui + pinia + vue-router + typescript

Why downgrade to vue2?

• Compatibility issues: The company is based onelement-uiDeveloped my own set of ui components, and also middle-end components developed based on vue2. Since the existing component libraries are all developed based on vue2, they are completely incompatible with Vue 3.
• Learning Cost: Developers on a team may need to spend a lot of time learning about new features in Vue 3. 📖
• Project requirements: We can use vue2.7 to replace the part of the project requirements that requires new features of Vue 3.
• vue3 is not compatible with IE10 browser (although I don't think it is necessary to consider this, but there are various reasons...🤫

Taking into account the above points, I have thought of several methods 🤔:

• Micro front-end: qiankun and micro-app have been considered, but since the ui component is developed using vue2, it cannot be compatible.
• ui component library + middle platform component library Upgrade to vue3 version: the project volume is too large and it was rejected
• Downgrade the project to vue2.7: The changes are small, and the logic basically does not need to be changed. Cost controllable

Dependencies of vue3 and vue2

vue3 required dependencies

    ...  // 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 required dependencies

    ... //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": "" // Because the company has its ownuiLibrary Used hereelement-uireplace

If you want to downgrade the vue3 project to vue2, let’s first look at the above dependencies.

• vue definitely needs to be changed
• vue-router Also needed to change: vue-routerThe default version is @4, but vue-router@4 can only support vue3, and in order to avoid more problems, we need to change to vue-router@3 version.

Comparison of the difference between vue3 and vu2

• Responsive difference: vue3proxyProxy, vue2()
• Optional API and Combination API
• Different life cycles

Here is a brief explanation, no emphasis

Practical steps

• vue downgrade
• vue-router downgrade
• Component library downgrade
• pinia or vuex
• eslint and other engineering

vue downgrade

npm i [email protected]

Change createApp() of vue3 to ()

// vue3
import { createApp } from "vue";
const app = createApp(App);
("xxx");
// vue2
import Vue from "vue";
("xxx");
new Vue({
  //...
}).$mount("#app");

vue-router downgrade

npm i [email protected]

Downgrade vue-router@ to @

// 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

becauseelement-plusIt is a component rewritten using vue3, so it cannot be applied in vue2 projects, so it needs to be rewrite and installed.element-ui

npm i element-ui

Thankfully, if you are usingelement-ui, then you will have few changes.element-plusandelement-uiThe component name remains consistent, and most method names and attributes are also consistent.

pinia

Official description

Pinia was originally redesigned to use the Composition API around November 2019. Since then, the original principles remain the same, but Pinia works for both Vue 2 and Vue 3 and does not require you to use the combined API. The APIs for both are the same except for installation and SSR, and these documents are targeted at Vue 3 and provide comments on Vue 2 when necessary so that Vue 2 and Vue 3 users can read it!

samepiniaAsvuexThe fifth-generation version is also fully compatible with vue2 and vue3, so you basically don't need to change this part.

eslint + husky + prettier + typescript

It is worth noting thatelintWhen using vue3, the extension is different from vue2, so you cannot copy and paste directly

No problems were found in other submissions

Problems/defects

• If you build it with vitefederationPluginandplugin-legacyThere will be conflicts and cannot be resolved for the time being

Summarize

Overall, there is no need to rewrite the downgrade of vue3 projects to vue2, and we can try our best to control the cost of modification.

We need to pay attention to the following points

• syntax and version of vue-router
• syntax and version of vue
• Compatibility and tags, properties, methods of ui component library
• eslint extension issues

Although vue3 provides an efficient and convenient aspect for our development, we still need to consider the company's development environment and the original public library in practice and conduct investigations. Avoid unnecessary trouble for other developers.

This is all about this article about downgrading the project to vue2.7. For more related projects to downgrading the vue2. Please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!