我要评论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";
结果：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论