经验分享:Vue2 项目升级 Vue3 + Element Plus,借助Deepseek手动升级
ztj100 2025-03-19 18:44 15 浏览 0 评论
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就行了,替换新版本还得做大量工作。
相关推荐
- 其实TensorFlow真的很水无非就这30篇熬夜练
-
好的!以下是TensorFlow需要掌握的核心内容,用列表形式呈现,简洁清晰(含表情符号,<300字):1.基础概念与环境TensorFlow架构(计算图、会话->EagerE...
- 交叉验证和超参数调整:如何优化你的机器学习模型
-
准确预测Fitbit的睡眠得分在本文的前两部分中,我获取了Fitbit的睡眠数据并对其进行预处理,将这些数据分为训练集、验证集和测试集,除此之外,我还训练了三种不同的机器学习模型并比较了它们的性能。在...
- 机器学习交叉验证全指南:原理、类型与实战技巧
-
机器学习模型常常需要大量数据,但它们如何与实时新数据协同工作也同样关键。交叉验证是一种通过将数据集分成若干部分、在部分数据上训练模型、在其余数据上测试模型的方法,用来检验模型的表现。这有助于发现过拟合...
- 深度学习中的类别激活热图可视化
-
作者:ValentinaAlto编译:ronghuaiyang导读使用Keras实现图像分类中的激活热图的可视化,帮助更有针对性...
- 超强,必会的机器学习评估指标
-
大侠幸会,在下全网同名[算法金]0基础转AI上岸,多个算法赛Top[日更万日,让更多人享受智能乐趣]构建机器学习模型的关键步骤是检查其性能,这是通过使用验证指标来完成的。选择正确的验证指...
- 机器学习入门教程-第六课:监督学习与非监督学习
-
1.回顾与引入上节课我们谈到了机器学习的一些实战技巧,比如如何处理数据、选择模型以及调整参数。今天,我们将更深入地探讨机器学习的两大类:监督学习和非监督学习。2.监督学习监督学习就像是有老师的教学...
- Python 模型部署不用愁!容器化实战,5 分钟搞定环境配置
-
你是不是也遇到过这种糟心事:花了好几天训练出的Python模型,在自己电脑上跑得顺顺当当,一放到服务器就各种报错。要么是Python版本不对,要么是依赖库冲突,折腾半天还是用不了。别再喊“我...
- 神经网络与传统统计方法的简单对比
-
传统的统计方法如...
- 自回归滞后模型进行多变量时间序列预测
-
下图显示了关于不同类型葡萄酒销量的月度多元时间序列。每种葡萄酒类型都是时间序列中的一个变量。假设要预测其中一个变量。比如,sparklingwine。如何建立一个模型来进行预测呢?一种常见的方...
- 苹果AI策略:慢哲学——科技行业的“长期主义”试金石
-
苹果AI策略的深度原创分析,结合技术伦理、商业逻辑与行业博弈,揭示其“慢哲学”背后的战略智慧:一、反常之举:AI狂潮中的“逆行者”当科技巨头深陷AI军备竞赛,苹果的克制显得格格不入:功能延期:App...
- 时间序列预测全攻略,6大模型代码实操
-
如果你对数据分析感兴趣,希望学习更多的方法论,希望听听经验分享,欢迎移步宝藏公众号...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)