首页 前端知识 Vue 2.x 项目升级到 Vue 3详细指南【总结版】

Vue 2.x 项目升级到 Vue 3详细指南【总结版】

2024-01-25 11:01:13 前端知识 前端哥 807 195 我要收藏

文章目录

  • 0.前言
  • 1.升级教程
    • 1.1. 升级 Vue CLI:
    • 1.2. 安装 Vue 3:
    • 1.3. 更新 Vue 组件:
    • 1.4. 迁移全局 API:
    • 1.5. 迁移路由和状态管理器:
    • 1.6. 迁移 TypeScript:
    • 1.7. 迁移测试代码:
  • 2.迁移总结
    • 2.0. ==这一项很关键==
    • 2.1. 语法变化
    • 2.2. 插件和库的兼容性
    • 2.3. TypeScript 支持
    • 2.4. 升级顺序
    • 2.5. 测试和调试
  • 3.官方文档和其他参考资源:

0.前言

在这里插入图片描述

首先提个问题,大家公司的Vue前端项目目前使用的版本是多少呢,是否已经在计划升级版本或者进行重构,那么如果有这个计划,那么这篇文章将是具有一定指导意义,至少在你的升级改造的工时评估方面有着借鉴意义。

随着Vue 版本的不断升级迭代,目前基本上有着稳定开发团队和技术积累的公司,陆陆续续将前端服务的Vue版本从Vue2.x 升级Vue3。因为Vue3 它带来了许多新特性和改进,例如更快的渲染速度、更好的类型推导、更好的组合 API 等等。如果你正在使用 Vue 2.x,升级到 Vue 3 可以让你的项目获得这些新特性和改进,并且更好地适应未来的发展。然而,Vue 3 与 Vue 2.x 在语法和一些核心概念上有一些重大变化,因此升级 Vue 3 可能需要一些额外的工作。本指南将为你提供一些有关如何将 Vue 2.x 项目升级到 Vue 3 的详细说明和指导,希望能够帮助你平滑地进行升级。

有同学说我这一篇 看的太费劲,建议我直接整理一篇Vue2.x 升级到 vue3 的修改清单
所以又整理了一篇
《Vue 2.x 项目升级到 Vue 3详细指南【修改清单】》希望对大家有所帮助

1.升级教程

1.1. 升级 Vue CLI:

如果你的项目是使用 Vue CLI 创建的,则需要升级到最新版本的 Vue CLI(3.0.0 及以上),以便支持 Vue 3。可以使用以下命令升级 Vue CLI:

npm install -g @vue/cli

yarn global add @vue/cli

1.2. 安装 Vue 3:

使用 npm 或 yarn 安装最新版本的 Vue 3:

npm install vue@next

yarn add vue@next

1.3. 更新 Vue 组件:

在 Vue 3 中,一些属性和选项被重命名或删除,需要更新组件代码。

  • v-bind=“$listeners” 替换为 v-bind=“listeners”

    在 Vue 2.x 中,可以使用 v-bind=“$listeners” 将所有父组件传递的事件监听器绑定到子组件上,但是在 Vue 3 中,这种语法被弃用了,需要改为 v-bind=“listeners”。

  • v-bind=“$attrs” 替换为 v-bind=“attrs”

    在 Vue 2.x 中,可以使用 v-bind=“$attrs” 将所有非 prop 的父组件属性绑定到子组件上,但是在 Vue 3 中,需要改为 v-bind=“attrs”

  • v-on:click.native 替换为 @click.native

    在 Vue 2.x 中,可以使用 v-on:click.native 绑定原生 DOM 事件,但是在 Vue 3 中,需要改为 @click.native

  • v-on:keyup.enter 替换为 @keyup.enter
    在 Vue 2.x 中,可以使用 v-on:keyup.enter 绑定键盘事件,但是在 Vue 3 中,需要改为 @keyup.enter。

  • v-on:keyup.13 替换为 @keyup.13

    在 Vue 2.x 中,可以使用 v-on:keyup.13 绑定键盘事件,但是在 Vue 3 中,不再支持这种语法,需要改为 @keyup.13。

  • v-on:keyup 替换为 @keyup
    在 Vue 2.x 中,可以使用 v-on:keyup 绑定键盘事件,但是在 Vue 3 中,需要改为 @keyup。

1.4. 迁移全局 API:

Vue 3 中全局 API 的使用方式也有所改变。例如:

  • Vue.filter 替换为 app.config.globalProperties.$filter

    在 Vue 2.x 中,可以使用 Vue.filter 注册全局过滤器,但是在 Vue 3 中,需要使用 app.config.globalProperties.$filter。

  • Vue.directive 替换为 app.directive

    在 Vue 2.x 中,可以使用 Vue.directive 注册全局指令,但是在 Vue 3 中,需要使用 app.directive。

  • Vue.mixin 替换为 app.mixin

    在 Vue 2.x 中,可以使用 Vue.mixin 全局混入选项,但是在 Vue 3 中,需要使用 app.mixin。

1.5. 迁移路由和状态管理器:

如果你的项目中使用了 Vue Router 和 Vuex 等状态管理器,需要将其升级到最新版本,以适配 Vue 3。

  • Vue Router:

    Vue Router 4.x 支持 Vue 3,需要将 Vue Router 和 Vue 升级到最新版本,然后更新路由的 API 和语法,例如:

    • router-link 替换为 RouterLink
    • v-bind=“ r o u t e " 替换为 : t o = " route" 替换为 :to=" route"替换为:to="route”
    • $router.push 替换为 router.push
  • Vuex:

    Vuex 4.x 支持 Vue 3,需要将 Vuex 和 Vue 升级到最新版本,然后更新状态管理器的 API 和语法,例如:

    • store.subscribe 替换为 store.watch
    • mapState 替换为 useStore/mapState

1.6. 迁移 TypeScript:

如果你的项目使用 TypeScript,需要更新 TypeScript 版本并进行相应的配置和迁移。

  • TypeScript 版本:

    Vue 3 需要 TypeScript 3.9 及以上版本。

  • 配置文件:
    需要更新 TypeScript 配置文件(tsconfig.json)中的编译选项,例如:

    {
      "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "jsx": "preserve",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "allowSyntheticDefaultImports": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "types": [
          "webpack-env",
          "@types/node",
          "@vue/cli-plugin-babel/types",
          "@vue/cli-plugin-eslint/types",
          "@vue/cli-service"
        ]
      },
      "include": ["src/**/*"],
      "exclude": ["node_modules", "dist"]
    }
    
  • 类型定义文件:

    Vue 3 中的类型定义文件(.d.ts)有所改变,需要将其更新为最新的版本。

1.7. 迁移测试代码:

如果你的项目中有测试代码,需要更新测试框架和测试代码,以适配 Vue 3。

  • 测试框架:

    更新测试框架到最新版本,例如 Jest 27.x、Mocha 9.x 等。

  • 测试代码:

    更新测试代码,例如:

 - import { mount } from '@vue/test-utils' 替换为 import { mount } from 'vue-test-utils'
 - Vue.extend 替换为 defineComponent
 - wrapper.vm.$emit 替换为 wrapper.trigger

将 Vue 2.x 项目升级到 Vue 3 需要更新组件代码、全局 API、路由和状态管理器、TypeScript 配置和测试代码等。如果你对迁移过程不确定,可以先在一个新的项目中尝试升级,以便在实际项目中更好地适配 Vue 3。

2.迁移总结

2.0. 这一项很关键

vue2.x升级到vue3 做好充分的准备和团队,以及领导沟通清楚,步骤以及面临的风险,以及应急准备,以及知识储备和人员储备。就比如搞了一半发现领导根本对vue升级的急迫性没那么强烈,中途给你把资源撤了,半拉子烂摊子毁在你的手里,瞬间挫败感笼上心头。记住资源是团队作战中很重要的事情,提前给团队和领导信心和目标。在升级之前,需要做好充分的准备和规划。有的时候干成一件事,也许技术上根本不是障碍

下面只是一些技术上的总结和技术事项,都好解决。

2.1. 语法变化

Vue 3 中的语法与 Vue 2.x 有一些重大变化,例如使用 createApp 替代了 new Vue,使用 setup 替代了 datamethods 等等。因此,需要花费一些时间来学习新语法和调整现有代码。

2.2. 插件和库的兼容性

一些 Vue 2.x 插件和库可能不兼容 Vue 3,需要更新或替换。在升级之前,需要检查你的依赖项是否与 Vue 3 兼容,并相应地做出调整。

2.3. TypeScript 支持

Vue 3 对 TypeScript 的支持更加完善,因此如果你的项目中使用了 TypeScript,升级到 Vue 3 可能需要一些额外的注意事项,例如更改类型定义和配置文件等等。

2.4. 升级顺序

如果你的项目依赖于其他库或框架,例如 Vuex、Vue Router 等等,需要在升级 Vue 3 之前先升级这些库或框架,以确保整个项目能够顺利升级。

2.5. 测试和调试

在升级之后,需要进行一些测试和调试来确保项目的稳定性和正确性。这可能需要一些额外的时间和精力。

在这里插入图片描述

3.官方文档和其他参考资源:

·如果你想自己去了解,那么我整理了这些资源可能对你有帮助

  1. Vue 3 官方文档:https://v3.cn.vuejs.org/ ↗
  2. Vue 3 Composition API 文档:https://v3.vuejs.org/guide/composition-api-introduction.html ↗
  3. Vue 3 TypeScript 支持文档:https://v3.vuejs.org/guide/typescript-support.html ↗
  4. Vue CLI 3 文档:https://cli.vuejs.org/ ↗
  5. Vue Router 4 文档:https://next.router.vuejs.org/ ↗
  6. Vuex 4 文档:https://next.vuex.vuejs.org/ ↗
  7. Vue 3 源码:https://github.com/vuejs/vue-next ↗
  8. Vue 3 生态系统:https://v3.ecosystem.vuejs.org/ ↗
  9. Vue Mastery 课程:https://www.vuemastery.com/courses/vue-3-essentials ↗
  10. Vue.js 开发者社区:https://forum.vuejs.org/ ↗
转载请注明出处或者链接地址:https://www.qianduange.cn//article/338.html
标签
vue.js
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!