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-cli 使用axios的操作方法及整合axios的多种方法
这篇文章主要介绍了vue-cli 使用axios的操作方法及整合axios的多种方法,vue-cli整合axios的多种方法，小编一一给大家列出来了，大家根据自身需要选择，需要的朋友可以参考下2018-09-09
Vue.js 是一个流行且强大的 JavaScript 框架,它允许我们构建动态和交互式 Web 应用程序,本文我们将深入探讨 Vue.js 应用程序中内存泄漏的原因,并探索如何定位和修复这些问题的有效策略,希望对大家有所帮助2023-09-09
vue this.$router和this.$route区别解析及路由传参的2种方式 && this.$route
this.$router 相当于一个全局的路由器对象,包含了很多属性和对象（比如 history 对象）,任何页面都可以调用其 push(), replace(), go() 等方法,本文给大家介绍Vue中this.$router与this.$route的区别 及push()方法,感兴趣的朋友跟随小编一起看看吧2023-10-10
这篇文章主要介绍了详解Vue2.0之去掉组件click事件的native修饰,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
在日常开发中,我们经常使用localStorage来存储一些变量,这些变量会存储在浏览中,对于localStorage来说,即使关闭浏览器,这些变量依然存储着,方便我们开发的时候在别的地方使用,本文就给大家介绍Vue如何监听localstorage的变化,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue基础之data存储数据及v-for循环用法,结合实例形式分析了vue.js使用data存储数据、读取数据及v-for遍历数据相关操作技巧,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了vue请求数据的三种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
本文通过实例代码给大家介绍了Vue axios配置,非常不错，代码简单易懂，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了vue2.x引入threejs,如果在开发过程中出现threejs生成的canvas出现外边框,只需要用css样式修改，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-09-09
在后台管理系统，可以根据登录用户的不同返回不同路由，页面也会根据这些路由生成对应的菜单，本文主要介绍了vue3动态路由+菜单栏的实现示例，感兴趣的可以了解一下2024-04-04
最新评论