ElementUI 1.x 项目升级到 2.x 踩坑指北

前情提要

• 项目依赖: vue, vuex, vue-router, element-ui

• 项目语言: Typescript

• 升级目标: 1.4.6 -> ^2.0.0

升级步骤

1. 依赖升级

修改package.json,部分关键依赖如下:

{

  dependencies: {

    "element-ui": "2.0.9",

    "vue": "2.5.2",

    "vue-router": "3.0.1",

    "vuex": "3.0.0"

  },

  devDependencies: {

    "vue-class-component": "^6.0.0",

    "vue-loader": "^13.3.0",

    "vue-property-decorator": "^6.0.0",

    "vue-template-compiler": "2.5.2",

  }

}

修改完成后, 运行npm install更新依赖, 如果不放心可以将node_modules文件夹删除后运行

2. 修改ElementUI非兼容性更新

参照ElementUI 的更新日志中的非兼容性更新部分, 检查项目代码, 将对应的代码修改为更新后的版本

如:

移除 theme-default, 新增 theme-chalk 主题

对应将main.js中

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

改为

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

这一步更新涉及面特别广, 工作量比较大, 而且要细心,

具体的更新内容看项目而定, 不能一一细述. 基本的办法就是, 一条一条检查非兼容性更新的内容, 然后通过全局搜索,引用搜索等方式更新项目代码

这一步做完之后, 项目基本可以编译通过了, 但可能还不能跑起来, 如果跑不起来可以试试第三步

3. 依赖的非兼容性更新

在更新的依赖中, 也有非兼容性跟新的内容, 对以上几个依赖分别去查看其Release Note尤其是大版本的Release Note的内容,

比如:

Vue.js v2.5.0 Level E 中说到依赖vue-loader >= 13.3.0 所以vue-loader 要做相应更新

更新了之后呢, 去看看vue-loader的更新日志:

Vue-Loader v13.0.0中对路由的引用方式做了调整, 所以路由引用有如下修改:

// before

const Foo = require('./Foo.vue')

// after

const Foo = require('./Foo.vue').default

这一步特别容易产生坑, 上面这两条都是踩了好久才出来的, 可能还有更多

4. Ts相关

1. 由于ElementUI中添加了types声明所以要将之前项目中关于ElementUI的types声明删除

5. 验证和微调

到这一步, 如果没有什么意外, 项目应该是可以跑起来的, 如果跑不起来, 可以根据报错信息做相应的修改

将项目运行起来后, 去检查项目的每个页面和功能, 看是否有页面错乱或者功能问题, 如果有的话, 参考ElementUI2.0 和 Vue 2.5 的更新日志做相关调整.

另外, 更相信了UI主题之后, 像表格, 标签之类的组件显示样式也有比较大改变, 也可以做相应的微调.

然后可以去浏览一遍2.0.0之后的几个版本的跟新日志, 看看自己项目还有什么需要跟新的.

更新完成 !