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！