Vue3出来好久了，我开发的项目还在使用Vue2框架，一般情况下不考虑升级，但是最近需要接入工作流程引擎之类的，看了下Vue2生态下操作空间不是很好，那索性尝试升级Vue3吧。一番操作下来，升级成功，目前没有发现什么异常。其中Deepseek是很好的工具，借助Deepseek让我重构代码省了不少事，不过我是手动操作的，遇到问题就问AI，并不是自动化完成，那么分享一下我的经验。

原项目使用框架情况

原项目主要是Vue2 + Element-UI + Vuex3 + Vue-Router3，这些主要框架都升级了所能支持的最新版本，项目是使用Vue-Cli搭建的，使用了vue-cli-service，配置项使用了eslint、Webpack等。

升级后新项目框架情况

升级Vue3 + Element-Plus + Vuex4 + Vue-Router 4 + Vite + pnpm包管理，因是从Vue2代码升级，页面的组件沿用选项式写法，只有新建页面考虑使用组合式写法，重新使用eslint+prettier作为格式化，基本只使用默认配置，格式化出来的代码效果一般，但不影响使用就不管了，反正借助工具默认配置不妨碍后期修改优化。

升级前注意

升级前可以向AI提问，获取升级方法。不过AI的方法只能作为参考，实际操作起来复杂的多，同时耗费较长时间，比如我就花了多日时间才升级完整项目，且没有确保完全的功能性测试，只因页面较多，页面内的功能未完全实测，不过基本上没再发现问题。

升级过程

• 提问AI如何升级，获取参考方法，比如可以在Deepseek提问，问题可以为“我有一个前端项目，使用框架为Vue2 + Element-UI + Vuex3 + Vue-Router3，如何升级到Vue3”
• 浏览各个关键框架或组件的升级文档，升级方法在官方文档都有说明的，去看官方文档按照过程操作是最好的。前面在AI提问时，也会告知去查看官网升级文档。

• 为了不影响原项目，我重新Fork了一份项目代码到新的仓库，以便于出错时可以在老项目上查看原始代码。
• 因为使用的UI组件库是Element-UI，新版本是ElementPlus，所以先进行ElementPlus的升级操作，在官方文档中就有操作方法，先按照官方文档进行升级，不过此方法只是替换了大部分代码，并不是完全升级，很多用法并不会帮你升级，比如很多组件的slot就不会替换，需要手动替换。
• 按照ElementPlus的方法升级UI组件以后，再进行Vue、Vuex、VueRouter的升级，另外就是打包工具升级为Vite。方法就是重新再创建一个Vite的空白项目，按照空白项目的写法，替换老的app.vue的代码。删除所有原始项目的npm依赖，把旧的内容先全部移除，也就是只保留src目录下的东西，重新使用Vite项目脚手架创建项目结构，当然如果你还有一些外部的图片等assets资源可以保留，包括public目录，但是原来的public下的index.html文件用不着了，使用Vite项目创建的根目录下的index.html文件替代。
• 重新安装项目所需的npm依赖，Vuex、Vue-Router等，使用新版本的方法重新引入到main.js文件中，一般只需要修改一下创建方法就行了，内部功能基本不需要修改，先运行，报错再修改即可。
• 处理不兼容npm依赖库，使用替代方案。如旧版中使用vue的js打印插件，发现vue3不支持了，就直接删除，使用vue3的方法重构打印功能部分。
• 替换sass等css处理器，老项目是使用各种node-sass、scss-loader等，使用Vite新项目后使用Vite的插件，运行时会提示需要安装sass-embedded，安装以后就支持scss的代码了，不需要像老版本一样进行复杂的配置。
• 使用Vite以后项目启动的命令变了，直接用Vite命令替代vue-cli-service serve等，Webpack配置那些也不存在了，前文所说一样，只保留了src等业务逻辑相关的目录的内容，工程项目那些配置都被新的Vite创建的文件替代了。
• 到此，基本上按照AI的结果进行操作即可
• 运行项目，按照运行报错提示信息进行修改
• vue3不再支持Filter即管道过滤器，这点真的很烦，需要把管道写法改为计算属性的写法，只能一点点替换操作。
• ELementPlus很多组件使用组件作为属性，当你组件作为属性时，在选项式写法中，需要把组件写在计算属性里，而不是data。在选项式组件写法中，引用进来的组件作为一个属性写在模板属性上是不行的，需要放到计算属性上，如下图所示，当然，如果改为组合式组件写法倒是直接使用就行。

最后的操作

• 最后主要就是ElementPlus组件的用法和Vue3语法的升级了，这点就借助Deepseek和编辑器进行升级，你可以让Deepseek帮你写查找和替换的正则语法，进行不兼容部分的代码替换，其中最麻烦的就是vue2的slot和vue3 slot不一样。

总结

vue2升级vue3工作量不少，主要是vue3很多地方兼容，但一些地方又兼容，让升级成为一种可能，但是需要进行大量工作。如果没有必要，不用升级Vue3。且vue2是选项式组件写的页面，升级以后还是继续用选项式比较好。另外，状态组件虽然vue3推荐pinia，但是老项目升级暂时用Vuex就行了，替换新版本还得做大量工作。