第
vue项目element?UI?版本升级过程遇到的问题及解决方案
目录vue项目elementUI版本升级过程遇到的问题查阅资料升级elementui遇到的问题总结
vue项目elementUI版本升级过程遇到的问题
最近发现项目的elementui版本是2.5而最新的版本已经是2.15所以想要更新一下elementui的版本
查阅资料升级elementui
直接在终端运行
首先卸载旧版本：npmuninstallelement-ui安装最新版本:npminstallelement-ui-S
全局引入elementui：
参见elementui官方网站：Element-TheworldsmostpopularVueUIframework
importElementUIfromelement-ui;
importelement-ui/lib/theme-chalk/index.css;
Vue.use(ElementUI);
遇到的问题
1一开始打开项目关于旧版本的elementui界面直接卡死打不开
查阅很多资料后发现：
vue版本与elementui的版本相关：如果vue版本在2.5.10之下你的elementui版本就不可高于2.7这里还需要将vue的版本升级为2.6.10.执行：npminstallvue@2.6.10升级vue版本
2升级之后还是报错vue-template-compiler提示不兼容
这里我们还需要将vue-template-compiler的版本升级：执行命令：npmivue-template-compiler@2.6.10
3升级之后再次重启项目还是报错：
(EmittedvalueinsteadofaninstanceofError)Donotusev-forindexaskeyontransition-groupchildren,thisisthesameasnotusingkeys.
百度翻译：发现是v-for的key问题不能使用index因为相当于没有使用。
这里很懵，不是说key保证唯一即可吗为啥不能使用index作为key的值了我这里尝试两种办法都可奏效
1直接删除，不使用key（不建议使用，违背了虚拟dom的diff算法原则）2按照它说的使用一个唯一的id值作为key的值
4重新打开项目发现都可以使用但是有些图标不可见比如el-dialog右上角的对话框的关闭按钮
检查样式发现：
项目中有用到自定义的elementui样式直接改为现在最新版本的elementui图标样式即可
找的样式改为content:\E6DB
结果：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。