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-i18n报错的解决方法

    vue项目中使用vue-i18n报错的解决方法

    这篇文章主要给大家介绍了关于vue项目中使用vue-i18n报错的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • Vue实现滑动验证功能

    Vue实现滑动验证功能

    这篇文章主要为大家详细介绍了Vue实现滑动验证功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

    解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

    这篇文章主要介绍了解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,需要的朋友可以参考下
    2019-10-10
  • Vue 前端导出后端返回的excel文件方式

    Vue 前端导出后端返回的excel文件方式

    这篇文章主要介绍了Vue 前端导出后端返回的excel文件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue.js中指令Directives详解

    vue.js中指令Directives详解

    这篇文章主要为大家详细介绍了vue.js中指令Directives,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • vue实现跨域的方法分析

    vue实现跨域的方法分析

    这篇文章主要介绍了vue实现跨域的方法,结合实例形式分析了vue.js跨域的原理与相关实现技巧,需要的朋友可以参考下
    2019-05-05
  • 解决nuxt页面中mounted、created、watch执行两遍的问题

    解决nuxt页面中mounted、created、watch执行两遍的问题

    这篇文章主要介绍了解决nuxt页面中mounted、created、watch执行两遍的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue-cli多页面应用实践之实现组件预览项目

    vue-cli多页面应用实践之实现组件预览项目

    在最近的项目中遇到了一个需求,找了相关资料后终于实现,这篇文章主要给大家介绍了关于vue-cli多页面应用实践之实现组件预览项目的相关资料,需要的朋友可以参考下
    2022-05-05
  • 详解mpvue开发微信小程序基础知识

    详解mpvue开发微信小程序基础知识

    这篇文章主要介绍了详解mpvue开发微信小程序基础知识,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • Vue 获取数组键名的方法

    Vue 获取数组键名的方法

    本篇文章主要介绍了Vue 获取数组键名的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06

最新评论