文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue3.x项目降级到vue2.7如何解决

2023-07-05 13:28

关注

今天小编给大家分享一下vue3.x项目降级到vue2.7如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

把 vue3 项目降级到 vue2 ⬇️

原项目为 vue3 + vite + element-plus + pinia + vue-router + typescript 构建

降级后为 vue2.7 + vite + element-ui + pinia + vue-router + typescript

为什么要降级到 vue2 ?

考虑到上面几点,我想了几个方法 ????:

vue3 和 vue2 的依赖

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" // 因为公司有自己的ui库 这里用element-ui代替

想要把 vue3 的项目降级到 vue2,我们先看下上面的依赖,

对比 vue3 和 vu2 的区别

这里只简单说明,不做重点

实践步骤

vue 降级

npm i vue@2.7.5

将 vue3 的 createApp() 改为 vue.use()

// vue3import { createApp } from "vue";const app = createApp(App);app.use("xxx");// vue2import Vue from "vue";vue.use("xxx");new Vue({  //...}).$mount("#app");

vue-router 降级

npm i vue-router@3.6.5

将vue-router@4.x.x 降级到 @3.x.x

// vue3 + vue-router4import {  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-router3import 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

因为 element-plus 是使用vue3重写的组件,所以无法应用在vue2的项目中,所以需要重写安装 element-ui

npm i element-ui

值得庆幸的是,如果你使用的是 element-ui ,那么你的改动会很少,element-pluselement-ui的组件名保持了一致,并且大多数的方法名和属性也都保持了一致。

pinia

官方说明

Pinia 最初是在 2019 年 11 月左右重新设计使用 Composition API 。从那时起,最初的原则仍然相同,但 Pinia 对 Vue 2 和 Vue 3 都有效,并且不需要您使用组合 API。 除了安装和 SSR 之外,两者的 API 都是相同的,并且这些文档针对 Vue 3,并在必要时提供有关 Vue 2 的注释,以便 Vue 2 和 Vue 3 用户可以阅读!

同样 pinia 作为 vuex 的第五代版本,也是完全兼容vue2和vue3的,所以这部分你也基本不用改动。

eslint + husky + prettier + typescript

值得注意的是 elint 在使用vue3的扩展和vue2是不同的,所以不能直接复制粘贴

其他的交验倒是没发现什么问题

问题/缺陷

以上就是“vue3.x项目降级到vue2.7如何解决”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯