vue2.1升级2.6及element1.x升级2.x心得

大佬教程收集整理的这篇文章主要介绍了vue2.1升级2.6及element1.x升级2.x心得，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

前言:

博客停更很久了，可能已经习惯了日复一日的搬砖生活。工作日的两点一线的疲惫，回家之后的低效率成了这几个月自己状态的一个缩影。最近和几位朋友有过一些交流，有的辞去工作重返象牙塔，有的坚持自己的极客之道。若要论忙，比起996或者是边学习边工作还是相差甚远。人，总喜欢为自己的懒找借口。

十里银滩，自然风光，钟灵毓秀。两天的阳江之旅，缓解了不少工作上的疲态，躺在酒店，想想还是把这篇博客给写完吧。

现在前端技术发展的如此之快，elementUI 1.x早已成为过去式，甚至连2.x也即将随着vue升级到3.x版本而渐渐退场。因此这篇博客主要是对老版本elementUI项目的升级做一个记录，也是为将来elementUI结合vue3.x升级提供一个可能的思路。本篇文章主要是结合自己最近工作中对vue2.1 + element 1.x升级到vue2.6 + element 2.15.x所遇到的问题和心得进行一个总结。

升级原因：

1.项目的技术栈比较老旧，许多业务需要在最新的elementUI的基础上进行开发，靠原生vue手写实现封装花费时间较多且稳定性不是很好； 2. 老项目中存在一些设计不规范的地方，如全局样式泄露、相同组件样式不统一等，此次升级也能很好的对项目中不规范的地方进行一次扫雷； 3. 如今大多数开源的vue应用，如easytable、Vue-TreeSELEct等都依赖于vue2.2或更高的版本，vue2.1版本显然是没有办法兼容这些组件的； 4. vue2.1版本相比2.6版本缺少了一些好用的新特性，升级也是为后续vue3.x升级铺路，保持项目技术栈的活力；

升级步骤：

技术框架升级，其实是需要一个比较长时间的预研的。如果你是对个人项目进行升级，不妨进行大胆的尝试；如果是公司项目，还是需要长时间的预研和同事的支持，因为elementUI1.x到2.x的跨越对大型项目来说，真的有比较大的工作量，还需要花大量的时间进行测试以及升级过程中新的需求的代码合并。由于有些内容涉及到公司的代码，因此无法展示出来，只能用文字进行相应的介绍，不便之处，敬请谅解。

一、安装新版本的vue和elementUI

我这里使用的是2.6.x版本，elementUI为2.15.x版本（如果你的vue-loader版本较低，可能还需要升级vue-loader）。同时，还要对其他使用的vue组件进行升级，这里主要是介绍elementUI升级，如果有其他开源组件也需要升级，可以自己摸索。

二、解决控制台警告和报错

在安装新版本vue和elementUI之后，我们可以尝试运行一下我们的项目，不出意外的话是会有一些控制台报错的，项目无法运行。不同项目的报错和警告可能也不太一样，我在这里总结了一些常见的警告和报错：

1. HTML标签未闭合：vue2.1升级到2.2时加入了HTML标签检查机制，如果发现了未闭合的HTML标签，需要我们进行补全。
2. 对某些元素同时绑定了v-model和v-bind：需要移除v-bind，保留v-model
3. 在模板中使用了未在实例上挂载的变量：常见的情况如未在data中注册变量，但是在模板中使用了该变量，这在早期vue版本中是能运行的。
4. computed中的属性被强制修改：需要在computed中使用setter和getter访问和设置变量。

当然可能还有别的报错，面对这些报错还是不能着急，一个一个修改就完事儿了，当这些控制台报错都解决了之后，项目就能成功运行了。

三、解决非兼容性更新带来的警告

虽然项目能跑起来了，但是控制台还会有很多警告：一部分是来自vue本身的警告，还有一些是elementUI的非兼容属性或者即将废弃的属性所带来的警告，需要我们对这些警告进行修改。常见的有：

1. v-for循环渲染组件时，必须为组件绑定key值
2. v-for绑定的key值中，存在同样的key值
3. element中的废弃属性带来的警告，如：input中的icon改为suffix-icon；switch组件属性名称变化等。

四、解决elementUI非兼容性更新带来的问题

这部分是升级的重头戏，也是问题最多的地方，稍不注意就有可能有遗漏，导致项目某些功能无法正常使用，因此需要先了解elementUI升级所带来的所有非兼容性更新，这些非兼容性更新可以在elementUI的更新文档中找到:https://element.eleme.cn/#/zh-CN/component/changelog，为了方便大家查找这些非兼容性更新，我按组件对这些非兼容性更新进行了汇总，上传到了github，有需要的可以进行下载：

elementUI非兼容性更新汇总： https://github.com/WayneWang98/element-upgrade 在这里举出一些常见的非兼容性更新以及解决方案供大家参考：

1. 升级后很多el-icon名称发生了变化导致无法显示，需要去文档查看最新的icon名称；
2. checkbox的change事件中，参数由event变为了value，进行修改即可；
3. 移除了input的icon属性。现在通过suffix-icon或者suffix具名插槽来加入尾部图标；
4. input组件的change 事件现在仅在输入框失去焦点或用户按下回车时触发，与原生 input 元素一致。如果需要实时响应用户的输入，可以使用 input 事件；
5. Input的id属性被传递到了最底层的input元素，需要关注有id的el-input；
6. el-switch中：由于 on-* 属性在 JSX 中会被识别为事件，导致 Switch 所有 on-* 属性在 JSX 中无法正常工作，所以 on-* 属性更名为 active-，对应地，off- 属性更名为 inactive-*；
7. 日期控件中，点击清空按钮时，change中的参数由’’变为null，需要根据实际的业务逻辑进行修改；
8. table表格组件移除通过 inline-template 自定义列模板的功能，现在可以使用slot-scope实现自定义列模板功能；
9. 表单组件的 change 事件和 Pagination 的 current-change 事件现在仅响应用户交互：以前可以当currentPage被改变时，就会触发current-change，现在只有用户主动操作时才会触发current-change，需要根据实际业务进行修改； 10.el-dialog：移除 size 属性，现在 Dialog 的尺寸由 width 和 fullscreen 控制 ，移除通过 v-model 控制 Dialog 显示和隐藏的功能

更多的内容可以参考上面我的github中的详情文档。

非兼容性更新影响点特别多，我这里采用的方式是按模块进行修改，对文档中的非兼容性更新挨个进行查找与修改，与现有项目的功能保持一致。这也是最花时间的地方。修改时一定要细致谨慎，真的很@R_150_10197@。我们是很多同事一起修改，有问题一起讨论，因为项目真的很大。

五、修改样式，进行测试

进行到了这一步，其实项目中最难的非兼容性更新已经搞定了，项目的功能是没什么问题了，你只需要进行一些样式调整即可与老版本项目保持一致的功能了。 至于如何进行测试，每个项目的方法也不同，但是建议把测试时间尽量拉长一点，这样子才能发现项目中潜在的问题。

总结：

1. 一些老项目的技术栈已经较难满足新的需求时，需要进行升级，长痛不如短痛。
2. 升级过程中先解决控制台报错，让项目先能够运行起来，再对具体的功能进行验证与修改。
3. 技术栈升级中，预研真的非常重要，足够时间的预研能够减少升级过程中踩到的坑，预研时可以多参考技术栈的更新文档，这是最官方也是最全面的升级资料。

大佬总结

以上是大佬教程为你收集整理的vue2.1升级2.6及element1.x升级2.x心得全部内容，希望文章能够帮你解决vue2.1升级2.6及element1.x升级2.x心得所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。