ElementUI从1.x升级到2.x

2017年5月份定方案的时候elementUI还是1.x版本，后来elementUI升级到2.x了，好多属性废弃了、新增了一些属性，同时也做了一些优化，而且官方给出消息1.x不再维护了。无奈之下我们只能升级至2.x版本；
以下是我自己升级项目插件的时候记录的一些步骤及项目中的改动，整理了一份，现在给大家分享一下，希望能给大家提供一些帮助；
参考地址：

http://element-cn.eleme.io/2.2/#/zh-CN/component/date-picker
http://blog.csdn.net/wojiaomaxiaoqi/article/details/78428738

安装完高效升级插件npm-check-updates之后
安装方法

npm install -g npm-check-updates

查看最新的版本：npm-check-updates
简写：ncu
这样，再升级包就变得非常容易了。

我们看到，提示element-ui可以从当前版本升级到目前官网最新的2.0.2,执行ncu -a升级全部项目中可升级的包。

之后执行npm install安装，
包的依赖就都更新完毕了。
这时候我们在main.js中修改新增的 theme-chalk 主题：
将import 'element-ui/lib/theme-default/index.css'替换为

import 'element-ui/lib/theme-chalk/index.css'

运行 npm run dev查看一下项目变化。
elementUI自定义主题

http://element-cn.eleme.io/2.2/#/zh-CN/component/custom-theme

首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动

npm i element-theme -g

安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
从 npm

npm i element-theme-chalk -D  

从 GitHub

npm i https://github.com/ElementUI/theme-chalk -D

主题生成工具安装成功后，如果全局安装可以在命令行里通过 et 调用工具，如果安装在当前目录下，需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss


升级插件需要改动的内容
这块主要记录的是自己在项目中用到的必须更改的内容，具体更新内容还请查看官网的更新日志：http://element-cn.eleme.io/2.2/#/zh-CN/component/changelog
1.移除 theme-default;
2. scope="scope" 改成 slot-scope="scope"；
3. 新增 pagination 的 background 属性；
4. dialog移除size属性，我们可以自定义样式，添加类名如下：
size="tiny" 改成 class="dialog-tiny-width"
size="small" 改成 class="dialog-small-width"
size="large" 改成 class="dialog-large-width"

.dialog-tiny-width .el-dialog{width:410px;}
.dialog-small-width .el-dialog{width:660px;}
.dialog-large-width .el-dialog{width:990px;}

5.移除 icon 属性。现在通过 suffix-icon 属性或者 suffix 具名 slot 来加入尾部图标。
icon="search"改成 prefix-icon="el-icon-search"
或者 suffix-icon="el-icon-search"；
6.autocomplete移除 custom-item 属性。现在通过 scoped slot 自定义输入建议列表项的内容；

<template slot-scope="scope">
    <div class="value">{{ scope.item.value }}</div>
    <span class="name">{{ scope.item.name }}</span>
</template>

7.el-select 多选属性multiple 添加 collapse-tags；
8.el-option v-for="item in options5" 添加 :key="item.value"
如果 select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。
9.移除 on-icon-click 属性和 click 事件。现在如果需要为输入框中的图标添加点击事件，请以具名 slot 的方式添加图标;
10.checkbox
在更新后测试的时候发现checkbox挂了，于是查看，发现Checkbox Events的change事件的参数变了：
1.0:
Checkbox Events：

2.0:
Checkbox Events：

所以，原来1.0判断change函数里面是这么写的:

handleCheckAllChange(event) {
        this.checkedCities = event.target.checked ? cityOptions : [];
        this.isIndeterminate = false;
},

2.0是这样的：

handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
}

11.table修复点击可展开行的展开图标会触发 row-click 事件的问题

12.新增 Input 的 clearable 属性；
新增 Input 的 clear 事件（在点击"clearable"属性生成的清空按钮时触发）；
PS:官网是这么写的 但是我试了之后，发现select有clear事件，input并没有生效；
13.新增 clearValidate 方法，用于清空所有表单项的验证信息;
14.表单组件的 change 事件和 pagination 的 current-change 事件现在仅响应用户交互；
15.button 和表单组件的 size 属性现在可接受 medium、small 和 mini；
16.upload添加属性 :limit="3" :on-exceed="handleExceed"

handleExceed(files, fileList) { this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`); }

17.elementUI1.x的日期控件的change可以格式化日期;
elementUI2.x 的日期控件的change不可以格式化日期了;