背景
link-center项目的技术栈比较老旧，未来可以预测到许多业务需要在最新的 的基础上进行开发，靠原生 手写实现封装花费时间较多且稳定性不是很好，比如实现一个日期组件ElementVue
- 如今大多数开源的 应用，如 、 等都依赖于 以上的版本， 以下版本显然是没有办法兼容这些组件的
Vuevue-easytablevue-treeselectVue 2.xVue 2.x - 目前使用的版本也缺乏一些新的特性，升级之后，也是为了更好的适应
目标
- 从 平稳过渡到 以上
1.4.13Element 2.x - 兼容现有样式和组件
升级
移除 中的 版本package.jsonelement-ui
// package.json element-ui: '2.15.7'
安装最新版本
$ npm install element-ui @2.15.7 -S
改动点
引入位置替换
- 样式名称替换
在 中修改新增的 主题，将 替换为src/index.jstheme-chalkimport 'element-ui/lib/theme-default/index.cssimport 'element-ui/lib/theme-chalk/index.css - .babelrc
把 替换为theme-defaulttheme-chalk
引入优先级问题
有的组件样式需要进行定制覆盖，于是就在组件里面用 进行了同类名的样式替换，这样在开发环境下效果是符合预期的，但是打包编译后，优先级就变了。需要在 修改引入文件路径顺序的问题css scopedsrc/index.js
修改前：
import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
修改后：
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import App from './App.vue' Vue.use(ElementUI)
页面全局报错修正
- 编译报错，
Vue packages version mismatch
这个错误是因为在 版本升级过后，对应的 版本 及 的版本未升级的原因element uiVuevue-template-compiler
$ npm install vue-template-compile @2.6.14 -S
- 界面渲染失败，控制台报错： 属性不存在
_v
这里需要注意 最低兼容 ，因此升级 Vue 到 2.5 以上Element 2.xVue 2.5.x
$ npm uninstall vue $ npm install vue@2.6.12
- 编译报错,
TypeError: VueLoaderPlugin is not a constructor
// webpack.config.js const { VueLoaderPlugin } = require('vue-loader') module.exports = { module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ // 请确保引入这个插件！ new VueLoaderPlugin() ] }
vue-loader也需要升级，以便支持Element 2.x
组件属性变更
- 项目中的图标图标：
升级后很多 名称发生了变化导致无法显示，需要去文档查看最新的图标名称icon - 按钮：
为了方便使用第三方图标， 的 属性现在需要传入完整的图标类名Buttonicon - 复选框：
Checkbox的 事件中，参数由 变为了changeeventvalue - 输入：
- 移除了 的 属性。现在通过 或者 具名插槽来加入尾部图标
inputiconsuffix-iconsuffix - 移除 和 事件，现在如果需要为输入框中的图标添加点击事件，请以具名 的方式添加图标
on-icon-clickclickslot change事件现在仅在输入框失去焦点或用户按下回车时触发，与原生 元素一致。如果需要实时响应用户的输入，可以使用 事件inputinput- 盒模型从 修改为
blockinline-block Input的 属性被传递到了最底层的 元素，需要关注有 的idinputidel-input
- 选择：
- 盒模型从 修改为
blockinline-block Select，值为对象类型时，需要提供一个 作为唯一性标识value-keySelect，过滤情况下， 为选中选项的placeholderlabel
- 开关：
- 由于 属性在 JSX 中会被识别为事件，导致 所有 属性在 JSX 中无法正常工作，所以 属性更名为 ，对应地， 属性更名为 。受到影响的属性有：
on-*Switchon-*on-*active-off-inactive-*on-icon-class、off-icon-class、on-text、off-text、on-color、off-color、on-value、off-value active-text和 属性不再有默认值inactive-text
- 时间选择器：
点击清空按钮时， 中的参数由 变为change’’null - 日期选取器：
同timepicker - 日期时间选取器：
同timepicker - 上传：
Upload重构升级， 属性更名为 , 属性更名为 ， 属性被移除default-file-listfile-listshow-upload-listshow-file-listthumbnail-mode - 表单组件：
Form validateField()方法回调的参数更新Form移除输入框的成功状态
- Table组件：
- 移除通过 自定义列模板的功能
inline-template sort-method现在和 保持一致的逻辑，要求返回一个数字Array.sort- 将 移至 元素以外，以保证其只被渲染一次
append slottbody expand事件更名为 ，以保证 的命名一致性expand-changeAPIrow-class-name和 的函数参数改为对象，以保证 的一致性row-styleAPI
- 标记：
type属性现在支持 四个值success、info、warning 和 danger - 分页：
表单组件的 事件和 的 事件现在仅响应用户交互changePaginationcurrent-change - 装载：
非全屏 遮罩层的 修改为 2000；
全屏 遮罩层的 值会随页面上的弹出组件动态更新Loadingz-indexLoadingz-index - 制表符：
- 盒模型从 修改为 ， 移除 属性
inline-blockblockTab-Panelabel-content Tabs现在内部不再维护 实例，需要在外部通过相关事件去处理tab
- 下拉菜单：
menu-align属性变更为 ，增加更多方位属性placementshow-timeout和 属性现在仅在 为 时生效hide-timeouttriggerhover
- 对话：
Dialog的遮罩层现在默认插入至 元素上body- 移除 属性，现在 的尺寸由 和 控制
sizeDialogwidthfullscreen - 移除通过 控制 显示和隐藏的功能
v-modelDialog
- 工具提示：
- 重构 ，不再生成额外的 标签，确保被 包裹的组件的结构不变
TooltipHTMLtooltip el-tooltip标签中，子元素如果有 ，则需要为 也加上v-ifel-tooltipv-if
非兼容性更新带来的警告
虽然项目能跑起来了，但是控制台还会有很多警告，一部分是来自 本身的警告，还有一些是 的非兼容属性或者即将废弃的属性所带来的警告，需要我们对这些警告进行修改。常见的有：VueElement
v-for循环渲染组件时，必须为组件绑定 值keyv-for绑定的 值中，存在同样的 值keykeyElement中的废弃属性带来的警告，比如： 中的 改为inputiconsuffix-icon
测试事项
- 建议把测试时间尽量拉长一点，这样子才能发现项目中潜在的问题
- 全量测试
