我們為什麼以及是如何從Angular.js 遷移到 Vue.js？

一些背景介紹

Holistics.ioSQL的商業智慧（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