好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

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

最近发现项目的element ui 版本是2.5&nbs p; 而最新的版本已经是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 -t emplate-compiler提示不兼容

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

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

(Em IT ted value instead of an instance of Error) Do not use v-for index as key on <transition-group> children, this is the s am e as not using keys.

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

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

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

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

检查样式发现:

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

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

结果:

总结

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

您可能感兴趣的 文章 : vue项目配置element-ui容易遇到的坑及解决 总结Vue Element UI使用中遇到的问题 vue引入element-ui之后,页面是空白的问题及解决

总结

以上是 为你收集整理的 vue项目element UI 版本升级过程遇到的问题及解决方案 全部内容,希望文章能够帮你解决 vue项目element UI 版本升级过程遇到的问题及解决方案 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于vue项目element UI 版本升级过程遇到的问题及解决方案的详细内容...

  阅读:39次