2021-04-19 从angularjs 迁移到vue

Posted 2023-04-12

参考技术A

由于历史原因，项目组维护的项目有 vue angularjs angular 多个包。招聘成本比较高，需要统一技术栈，全部使用vue重构。
这里记录下迁移过程，希望能帮助有需要的人。
本文记录从angularjs 迁移到vue ，后续angular 迁移到vue单独成文

main.js 这部分直接重写

在有注入 $translate 的地方导入 vue-i18n的实例

首先将模块从这个样子

改成下面这个样子

这里我写了一个通用方法 getVueOptions 处理$scope

这个放到 mounted() 里面调用 this.xxx 即可

把angular组件模板 xx.html ,直接贴到vue组件的 <template><div></div></template> 中

搜索 ng- ng-前面有空格,如果是方法的话(ng-cick,ng-mouseover)就换成 @ ,属性(ng-class,ng-style)就换成 : ,指令(ng-if,ng-show,ng-model)就换成 v-

正则模式搜索 \\s(.*?)\\s?=\\s?(["\'])\\\\(.*?)\\\\\\2 替换成 :$1="$3"

我这项目没怎么用,如果有用到就 export导出下,利用provide注入到根组件,用到的地方 inject一下

用类似axios的替换模式一个一个换成你vue的替代品即可,如果使用方式有差异就用正则查询全局替换就好了

组件 指令 过滤器 一个一个的重构就好了
组件的props有些是双向绑定的,可以使用vue的 xxx.sync this.$emit(\'update:xxx\') 的写法来搞定

下一篇 ： 《 typescript angular7 项目迁移到 vue2.x 》等我把改完再发心得

如何从 Angular.js 迁移到 Vue.js？

[原文]：Why and How We Migrated from AngularJS to VueJS
[作者]：Huy Nguyen

---

在写这篇文章的时候，我们刚从应用的代码库中删除了最后一行 AngularJS 代码，结束了历时 4 个月非侵入性的迁移工作，把我们的应用从 AngularJS 迁移到 VueJS。我会在本文中与大家分享这一过程中的经验。

背景

我们的应用（Holistics.io）是基于 SQL 的商业智能（BI）平台，使用了 Rails、Sidekiq、PostgreSQL 和 AngularJS 等技术。Rails 应用在 2013 年末刚开始的时候，还是使用 jQuery 和 AngularJS 技术实现的简单应用。我们主要使用了 AngularJS 的如下特性/功能。

• 视图模型绑定（控制器、视图和模板引擎）

• 依赖注入（服务、工厂、指令）

• Angular 的第三方组件（uib-modal、ui-select、…）

• 其它大部分是内部定制的 JavaScript 代码。

我们在 Angular 中遇到的问题

随着我们应用的升级，我们在使用 AngularJS 的时候遇到了这样一些问题：

• 渲染性能：作为数据工具，由于AngularJs的特性，我们不得不花大量的时间来呈现一张巨大的数据表。

• Angul