Vue3的到来开启了一系列增强和突破性功能的新时代。从Vue2到Vue3的这一进化步骤为开发者提供了一系列机会，能够让我们站在Web开发趋势的前沿，充分发挥这个卓越框架的潜力。上篇与大家分享了，Vue3引入的新特性。以及向Vue3迁移过程中如何处理已弃用和被淘汰的部分。今天用一个简单的TodoList项目实例分享如何从Vue2向Vue3过渡。

安装Vue迁移工具

安装迁移工具前准备工作：

• 将任何已弃用的命名/作用域插槽语法更新至最新版本。
• 如果使用自定义的 webpack，请将 vue-loader 更新到最新版本。
• 对于使用vue-cli ，升级 @vue/cli-service 到最新版本。

安装迁移构建：

• 将vue升级到^3.1.0；
• 安装@vue/compat（Vue迁移构建，版本要与vue版本相同）；
• 运行时报错先尝试一下npm cache clean --force清除 npm 缓存再进行安装；
• 将package.json中的vue-template-compiler替换为@vue/compiler-sfc@^3.1.0；

• 在*.config.js中配置@vue/compat;

vue-cli中配置

webpack中配置

Vite中配置

解决迁移构建过程的报错

存在构建迁移时与Vue3不兼容的问题,npm运行代码时出现报错,本实例项目中Vue2使用了filters函数而Vue3废弃了filter函数：

以及在控制台遇到下面这样的warning提示：

需要修改一些配置文件，解决Vue3和Vue2的区别：

main.js 在vue2 和vue3的配置区别

store.js 在vue2 和vue3的配置区别

还需要修改Vue3 组合式API 和Vue2之间的区别：

测试你的程序运行并删除迁移构建

首先测试已迁移的组件，确保它们在 Vue 3 环境中的功能正常。可以利用 Vue Devtools 扩展来在迁移过程中调试和检查你的应用程序。一旦测试完成，确保你的应用在 Vue 3 中运行正常，就可以卸载@vue/compat并删除在.config.js中的配置。

删除@vue/compat配置

删除在.config.js中的配置

今天以一个简单的实例分享Vue2向Vue3过渡，当然复杂的项目过渡中可能会有更多需要一一解决的问题和BUG！