前情提要
项目依赖: 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相关
- 由于ElementUI中添加了
types声明所以要将之前项目中关于ElementUI的types声明删除
5. 验证和微调
到这一步, 如果没有什么意外, 项目应该是可以跑起来的, 如果跑不起来, 可以根据报错信息做相应的修改
将项目运行起来后, 去检查项目的每个页面和功能, 看是否有页面错乱或者功能问题, 如果有的话, 参考ElementUI2.0 和 Vue 2.5 的更新日志做相关调整.
另外, 更相信了UI主题之后, 像表格, 标签之类的组件显示样式也有比较大改变, 也可以做相应的微调.
然后可以去浏览一遍2.0.0之后的几个版本的跟新日志, 看看自己项目还有什么需要跟新的.
更新完成 !