Vue 升级小记


来自:饿了么前端,https://zhuanlan.zhihu.com/ElemeFE

链接,作者:  回晓 

最近接手了一个 Vue 1.0 的陈年老项目,需要将其升级到Vue 2.0。下面记录一下升级过程:

安装迁移工具

首先需要安装 vue-migration-helper CLI 工具:

  1. 控制台运行命令:npm install --global vue-migration-helperCLI 工具来帮助项目从Vue 1.x 迁移到 2.x。 它扫描文件以查找特定于 Vue 的代码,并对需要升级的代码提供详细的警告。 vue-migration-helper的介绍说明告诉我们它大概能捕获 80% 的升级帮助信息,而不是全部。所以终端输出的帮助信息并不是完全正确的,在升级时不要盲目copy & paste,还是要根据实际情况去改写。

  2. 进入当前的项目:运行: vue-migration-helper

工具识别出了108 个需要升级的点:v2-a720e95cbb6f110fe57efe2848a8a415_hd



由于这个古董项目不是用 Vue-CLI 构建的,为了避免在升级依赖上出错,我直接新起了一个Vue-CLI 项目,将老项目中的业务部分进行迁移,这个是最快最能避免踩坑的解决方案(当然,这么做是因为踩坑了,所以爬起来了=_=)与当前最新的Vue-CLI 的依赖版本做了对比:

  • "vue": "^1.0.24" to "vue": "^2.5.2"

  • "vue-router": "^0.7.13" to "vue-router": "^3.0.1"

  • "vuex": "^2.4.0" to "vuex": "^3.0.1"

  • "webpack": "^2.4.1" to "webpack": "^3.6.0"

  • "vue-loader": "^8.5.2" to "vue-loader": "^13.3.0"

升级代码

对于108 个需要升级的点来说,花费的时间远比想象的要多,除了根据官方文档进行迁移升级之外,运行项目还是会有很多报错,下面总结了一下改动比较多的地方。

1. 过滤器

移除内置过滤器

Vue 2.0 不再提供内置过滤器。可以创建自己的过滤器或者引入外部库如moment.js,accounting.js 来对时间和货币等进行格式化。之前项目中用到的 orderBy 方法已经被弃用了,根据升级指南的建议,直接引入了 lodash 工具库,并使用计算属性重构。

推荐↓↓↓
前端开发
上一篇:开发更好用的 JavaScript 模块 下一篇:火狐浏览器是如何又变快起来的?