文章目录
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 替换为 RouterLinkv-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.watchmapState 替换为 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 替代了 data 和 methods 等等。因此，需要花费一些时间来学习新语法和调整现有代码。
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.官方文档和其他参考资源：
·如果你想自己去了解，那么我整理了这些资源可能对你有帮助
Vue 3 官方文档：https://v3.cn.vuejs.org/ ↗Vue 3 Composition API 文档：https://v3.vuejs.org/guide/composition-api-introduction.html ↗Vue 3 TypeScript 支持文档：https://v3.vuejs.org/guide/typescript-support.html ↗Vue CLI 3 文档：https://cli.vuejs.org/ ↗Vue Router 4 文档：https://next.router.vuejs.org/ ↗Vuex 4 文档：https://next.vuex.vuejs.org/ ↗Vue 3 源码：https://github.com/vuejs/vue-next ↗Vue 3 生态系统：https://v3.ecosystem.vuejs.org/ ↗Vue Mastery 课程：https://www.vuemastery.com/courses/vue-3-essentials ↗Vue.js 开发者社区：https://forum.vuejs.org/ ↗
文章来源
您阅读本篇文章共花了：
发表评论