我们为什么以及是如何从Angular.js 迁移到 Vue.js？

一些背景介绍

Holistics.io SQL的商业智能（BI）平台，使用Rails、Sidekiq、PostgreSQL和AngularJS编写。我们的Rails应用程序始于2013年底，作为一个简单的应用程序其中使用了jQuery和AngularJS。我们使用AngularJS主要特性/功能如下：

·

+模板引擎）

·

· Angular第三方组件（uib-modal，ui-select，…）

JavaScript。

我们在 Angular 中遇到的问题

AngularJS 的时候遇到了这样一些问题：

·

AngularJs的特性，我们不得不花大量的时间来呈现一张巨大的数据表。

· Angular 的文档不太好：

AngularJS，就越觉得它的文档实在难以理解。

·

AngularJS不好使用最重要的一个原因。

考虑不同的框架

Angular 2

Angular 2。对于我们来说，Angular 2 甚至比 Angular 1 还让人难以理解。它带来了太多新的变化（TypeScript），新的模板语法等，但我们觉得这并没有真正解决我们的核心问题。除此之外，从 V1 到 V2 的迁移之路在那时就一直让我们觉得困惑。

ReactJS

ReactJS。尽管我们非常喜欢它的哲学和生态原理系统，但有一件事情让我们吃惊： 3-4个月内支持新功能。

AngularJS 的使用基于 HTML 的模板系统，而 ReactJS 是用的 JSX。我们不能找到办法在迁移的过程中让两种技术很好的并存。

JSX 比基于 HTML 的模板更加冗长。

EmberJS

EmberJS 不是一个 JS 库，而是一个 Web 应用框架，我们必须用基于 EmberJS 重写所有东西。

我们为什么选择了 VueJS：逐步迁移

VueJS，但对于我们来说，最重要的决定性因素是： VueJS，而又不会破坏发展路径的迁移路径 Angular 实现的，哪些是 VueJS 实现的。

Vue 采用了与 ReactJS 相似的技术，基于组件，属性下行事件上行等。它与 AngularJS 在模板引擎方面有着惊人的相似。

AngularJS 和 ReactJS 的优美结合 AngularJS 模板，而我们的主要问题是 Angular 组件带来的复杂逻辑。

ng- 改为 v-，简直太美妙了！

Vue 结构的方式（单向数据流，基于组件），它迫使我们反思和重构代码，而不是继续写烂代码，这简化了我们的代码逻辑。

VueJS 的文档写得非常好，结构也非常清晰 VueJS 的另一个主要原因。我第一次使用 Vue 的时候，花了 30 分钟来阅读它的文档，立即觉得必须要试试这个东西。

我们是怎么进行逐步迁移的：

Rails 应用环境有关，如果你没有使用 Rails，可能会有些不同）：

1. 把 AngularJS 控制器逻辑转换到 VueJS

VueJS 时尽可能少做改动。因此，我们从标准的 AngularJS 和模板文件开始修改，将 VueJS 引入其中：

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// user_edit_controller.js.es6` import Vue from 'vue' app.controller('UserEditCtrl', ['$scope', '$http', 'Ajax', 'Util', 'Modals', function ($scope, $http, Ajax, Util, Modals) { let vapp = new Vue({ el: '#v-wrapper', components: { ... }, data: { } }); } ]);

JavaScript

1 2 3 4 5 6 7 8 9

<!-- `users/edit.html.erb` --> <div ng-controller="UserEditCtrl"> <div id="v-wrapper"> <!-- vuejs logic goes here... --> <input v-model="username" placeholder="Username" /> ... </div> </div>

Vue 的逻辑，却不需要改变任何相关应用的前端结构。这极大程度的帮助我们降低在迁移过程中发生错误的风险，我们可以花 1-2 个小时迅速地将一小部分 AngularJS 实现的东西转换为 VueJS 实现，然后测试并部署， 不用担心它会导致回归缺陷

2. 把 AngularJS 服务转换为 ES6 模块

AngularJS 中大量使用的 $http 服务的替代品。我们直接使用了 axios $http，但我们围绕它进行了抽象封装，以使修改变得非常简单。

AngularJS：

JavaScript

1 2 3 4 5 6 7 8

// users.js app.service('Users', ['$http', 'Ajax', function ($http, Ajax) { this.create = function(user) { // ... } } ]);

ES6 类语法代替就好：

JavaScript

1 2 3 4 5 6

// users.js.es6 export default class Users { static create(user) { // ... } }

Angular 代码在使用这些服务，我们会复制这些服务并使用 ES6 类语法来实现，同时保持原有的 Angular 版本，直到不再有 Angular 代码使用它们为止。 这会在短时间内让代码出现重复，但我们只需要小心一点，在代码中多写些注释来关联两个版本。

3. 使用 VueJS 组件代替 AngularJS 控制器

AngularJS 控制器可以完全迁移到 VueJS，这和上面的第 2 步相似，我们使用 ES6 语法来代替 app.controller() 定义。不过这次，我们使用 Vue 的单文件组件：

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<template> <div> <!-- vuejs logic goes here... --> <input v-model="username" placeholder="Username" /> ... </div> </template> <script> import Users from 'users.js.es6' export default { data: { }, methods: { }, mounted() { // initializing } }; </script>

user_edit.vue

4. 为 Rails 控制器/视图添加安装入口

Rails 页面加载的时候会渲染视图。在上面的 Vue 单文件组件中，我们将 Raisl 视图，users/edit.html.erb 文件，改为：

JavaScript

1 2 3

<div class="v-user-edit"> <user-edit></user-edit> </div>

Vue 组件：

JavaScript

1 2 3 4 5 6 7 8

import UserEdit from 'user_edit.vue' let vueConfig = { el: '.v-user-edit', components: { UserEdit } }; new Vue(vueConfig);

总结

2017 年九月末完成了框架的迁移，经历了大约 4 个月时间的非侵入性（我们在迁移过程中会继续添加其它新特性）工作。实际上我们并没有把迁移作为最紧急的任务， Angular 代码，我们会先把它转换成 Vue 实现，然后再进行变更

·

VueX 和 Vue Store；它们大大提高了编程效率

·

·

UI 性能

Vue 就是最好的，它只是在我们特定的情况下工作良好：Angular 固有的设计本质导致使用 Angular 实现应用很重，而 Vue 为我们很好地填补了这一空白，这一切都是自然而然地逐步迁移实现的。

543627393

原文发布时间为：2018年6月14日

原文作者：小花猫Jane

本文来源： 掘金如需转载请联系原作者