vue项目element UI 版本升级过程遇到的问题及解决方案

更新时间：2023年01月21日 09:25:03 作者：￡白昼の星☆

这篇文章主要介绍了vue项目element UI 版本升级过程遇到的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue项目element UI 版本升级过程遇到的问题

最近发现项目的element ui 版本是2.5 而最新的版本已经是2.15所以想要更新一下element ui的版本

查阅资料升级element ui

直接在终端运行

首先卸载旧版本： npm uninstall element-ui
安装最新版本: npm install element-ui -S

全局引入 element ui：

参见element ui官方网站：Element - The world's most popular Vue UI framework

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);

遇到的问题

1 一开始打开项目关于旧版本的element ui界面直接卡死打不开

查阅很多资料后发现：

vue版本与element ui的版本相关：如果vue版本在2.5.10之下你的elementui版本就不可高于2.7
这里还需要将 vue的版本升级为2.6.10.
执行：npm install vue@2.6.10 升级vue版本

2 升级之后还是报错 vue-template-compiler提示不兼容

这里我们还需要将 vue-template-compiler的版本升级：
执行命令：npm i vue-template-compiler@2.6.10

3 升级之后再次重启项目还是报错：

(Emitted value instead of an instance of Error) Do not use v-for index as key on <transition-group> children, this is the same as not using keys.

百度翻译：发现是 v-for的key问题不能使用index 因为相当于没有使用。

这里很懵，不是说 key保证唯一即可吗为啥不能使用index作为key的值了我这里尝试两种办法都可奏效

1 直接删除，不使用key（不建议使用，违背了虚拟dom的diff算法原则）
2 按照它说的使用一个唯一的id值作为key的值

4 重新打开项目发现都可以使用但是有些图标不可见比如el-dialog右上角的对话框的关闭按钮

检查样式发现：

项目中有用到自定义的element ui样式直接改为现在最新版本的element ui图标样式即可

找的样式改为 content: "\E6DB";

结果：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue中路由传参的实用方式分享
这篇文章主要为大家详细介绍了VUE项目中路由之间的传值方式，文中的示例代码讲解详细，涉及到的方法也都是开发时常用的，希望对大家有多帮助
2023-06-06
vue-cli3脚手架安装方法
这篇文章主要介绍了vue-cli3脚手架安装方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-04-04
vue中防抖和节流的使用方法
防抖和节流是我们在开发过程中常用优化性能的方式,可以减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算,这篇文章主要给大家介绍了关于vue中防抖和节流使用的相关资料,需要的朋友可以参考下
2021-08-08
vue动态绑定background的方法
background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等属性的缩写,本文我用动态绑定background-image来举例,感兴趣的朋友跟随小编一起看看吧
2023-10-10
Vue中遍历数组的新方法实例详解
这篇文章主要介绍了Vue中遍历数组的新方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-07-07
vue自定义组件(通过Vue.use()来使用)即install的用法说明
这篇文章主要介绍了vue自定义组件(通过Vue.use()来使用)即install的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue项目前端加前缀(包括页面及静态资源)的操作方法
这篇文章主要介绍了vue项目前端加前缀(包括页面及静态资源)的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
关于vue-router的那些事儿
要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题，感兴趣的朋友跟随脚本之家小编一起学习吧
2018-05-05
webstorm+vue初始化项目的方法
今天小编就为大家分享一篇webstorm+vue初始化项目的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-10-10
vue使用pdfjs-dist+fabric实现pdf电子签章的思路详解
最近领导提了一个新需求:仿照e签宝,实现pdf电子签章,本文给大家介绍vue使用pdfjs-dist+fabric实现pdf电子签章的思路,感兴趣的朋友一起看看吧
2023-12-12