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

置顶予你@。

已于 2022-03-30 11:23:18 修改

阅读量5.9k

点赞数 4

分类专栏： vue 文章标签： vue.js element ui

于 2022-03-30 11:22:28 首次发布

本文链接：https://blog.csdn.net/weixin_44948981/article/details/123840903

版权

63 篇文章 2 订阅

订阅专栏

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

直接在终端运行

首先卸载旧版本： npm uninstall element-ui

安装最新版本: npm install element-ui -S

全局引入 element ui：

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";

结果：

予你@。

关注