几年前，elementUI还是1.x版本。后来elementUI升级到了2.x版本。舍弃了很多属性，增加了一些新属性，也做了一些优化。而官方消息是1.x不再维护了。无奈之下，只能升级到2.x版本；以下是我在升级项目插件时记录的项目中的一些步骤和变化。整理了一份，现分享给大家，希望能给大家提供一些帮助。;elementupgrade1.1pullthelatestbranch从latestrelese拉取最新的branch，提供给升级版本测试1.2Elementversionupgrade1.拉取最新的branch，将element版本替换为卸载前的element-ui版本npmuninstallInstallelement-ui最新版本（你要安装的版本）npminstallelement-ui@2.15.6-S1.3导入位置替换1、引入名称位置替换修改main.js中新增的theme-chalk主题：添加import'element-ui/lib/theme-default/index.css替换为import'element-ui/lib/theme-chalk/index.css2，替换theme-default-----》theme-中的.babelrc文件chalk3.更换theme-default-----》theme-chalk1.4在node_modules\babel-plugin-component\README.md文件中引入了优先级问题，部分组件样式需要自定义覆盖，所以在组件中使用cssscoped替换同名样式，这样在开发环境下效果是符合预期的，但是打包编译后，优先级发生了变化，所以才发现是在main中引入了文件路径的顺序。js.本来以为顺序没必要，但是还是有影响的。原配置：importVuefrom'vue'importAppfrom'./App.vue'importElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)修改:importVuefrom'vue'importElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'importAppfrom'./App.vue'//这里放App的参考顺序Vue.use(ElementUI)1.5页面放在最后。全局纠错这个错误是因为elementui版本升级后对应的vue版本和vue-template-complier版本没有升级。在package.json文件中找到对应的依赖声明，修改版本号，npminstall即可。1.6组件属性的变化1.组件属性的修改原有的:size属性已经失效，取而代之的是:width属性。对应关系为：size="large"=>width="85%"；大小=“小”=>宽度=“30%”；大小=“小”=>宽度=“50%”；大小=“全”=>宽度=“100%”。此外，v-model属性被替换为visible.sync属性。2、的改变组件属性的修改这里只是属性名的改变，全局查找替换即可。on-text=>active-textoff-text=>inactive-texton-color=>active-coloron-value=>active-valueoff-value=>inactive-value3,在这里更改组件属性提到的样式变化是指1.4.6版本评分组件升级后，评分星的尺寸变小了。如果在项目中不修改它的font-size，可能会导致原来和谐的风格升级后显得格格不入。因此，建议调整评分组件的大小。4.的改变组件属性的修改这里的改变是指input中的@change事件。在1.4.6版本中，一旦输入框的值发生变化，就会触发@change事件。升级后，在触发blur事件之前，输入框的值改变后需要触发@change事件。这会对页面交互产生比较大的影响。解决方案是将@change事件更改为@input事件。5、Icon组件属性修改的变化原来在input组件中，可以通过icon属性来指定图标，比如或者现在这样写是无效的1.icon可以通过prefix-icon和suffix在input组件的头部和尾部添加显示图标-icon属性，或者你可以将图标按插槽放置。2、目前on-icon-click在高版本的input组件中没有这个属性。on-icon-click事件目前只能通过slot来解决，所以如果在项目的input属性中使用icons，需要改为prefix-icon或者suffix-icon：或：6、slot-scope对组件属性的修改其实就是vue在2.5.0的变化。scope被slop-scope代替了，所以在element中升级之后，修改相应的scope使用的地方就可以了。7.checkboxisupdating经过测试，发现checkbox挂了，于是查看发现CheckboxEvents的change事件的参数发生了变化：1.0CheckboxEvents:事件名称描述回调参数变化事件事件绑定值改变时触发的对象2.0:CheckboxEvents:事件名称描述回调参数change绑定值改变时触发的事件的更新值所以，原来1.0的判断改变函数是这样写的：handleCheckAllChange(event){this.checkedCities=event.target.checked?城市选项：[]；this.isIndeterminate=false;},2.0是这样的：handleCheckAllChange(val){this.checkedCities=val?城市选项：[]；this.isIndeterminate=false;},7.Navmenu导航菜单原菜单有两种样式可以选择。主题有两个可选值light和dark。现在没有这个属性了，默认是chalk主题的白色，如果要自定义需要设置额外的参数descriptiontypeoptionalvaluedefaultvaluebackground-color菜单背景色（只支持hex格式）string—#fffffftext-color菜单文本颜色（仅支持十六进制格式）string—#409EFFactive-text-color当前活动菜单的文本颜色（仅支持十六进制格式）string—#409EFF但此设置会有缺点。如果项目通过自定义样式改变主题颜色，那么这里需要单独设置，并且只支持hex格式，需要计算颜色的具体值，不能通过scss变量控制。9.日期选择器日期选择器有value-format属性value-format="yyyy-MM-dd"占位符，非范围选择的占位符内容字符串——start-placeholder，当开始日期的占位符内容字符串rangeselection———end-placeholder选中范围时添加结束日期的占位符内容。start-placeholder="开始日期"end-placeholder="结束日期"初始化值只需要this.form.dataRange=[startTime,endTime]//yyyy-MM-ddform10,``:el-table中的row-classtable-name="tableRowClassName"在返回函数之前，参数为：tableRowClassName(row,index){......}升级后的回调函数为：tableRowClassName({row,rowIndex}){if(rowIndex===1){return'warning-row';}elseif(rowIndex===3){return'success-row';}返回'';}之前的参数是Index，现在换成了rowIndex。重要的是参数Adding{row,rowIndex}会受到影响，必须修改。vueupgrade1.1vueupgradenpminstall-svue目前我们的项目版本是2.5.2，vue官方给出的意见是2.X版本到2.6.X。因此，我们需要升级到当前最高版本，将vue升级到最高版本2.6.14
