AngularJs項目轉Vue項目技術方案
一、需求背景
? ? ? ?現項目需要根據已有項目的工程，轉換成h5頁面，對接第三方APP，業務邏輯、樣式等實現全部依據原項目，把原項目AngularJs技術棧換Vue技術棧。
二、需求概述
1、項目工程搭建，模塊設置；
2、對接業務系統，在線功能和離線功能；
3、應用頁面繪制以及業務邏輯實現；
三、解決設計思路
1、搭建Vue項目工程；
2、全局引入Ionic的樣式；
3、根據AngularJs項目靜態頁面布局，對Vue項目進行布局修改，還原頁面布局；
4、根據AngularJs項目業務邏輯，對Vue項目進行語法修改；
5、提煉相應的組件；
6、IndexedDB離線數據處理；
四、前提條件
1. 原技術框架：AngularJs+Ionic；
2. 現技術框架：Vue；
3. 兩個項目的業務需求以及頁面布局相同；
五、詳細步驟
1、構建Vue項目工程 ——》工程搭建
2、配置項目的運行環境的baseUrl——》基地址配置
3、配置config文件夾下，dev和prod環境 ——》跨域問題（原項目轉換直接對接第三方APP，出現跨域問題）
4、配置login.js文件，對接第三方APP，做單點登錄 ——》登錄獲取token
5、ionic.css文件放置在asstes文件夾下，在main.js中全局引入該樣式 ——》頁面樣式同步
6、根據AngularJs項目提煉Vue技術棧組件 ——》頁面組件
AngularJs：
Vue：
7、復制AngularJs項目dom結構至Vue項目，根據Vue規則進行修改 ——》頁面布局
AngularJs：
Vue：
8、根據AngularJs項目業務邏輯，撰寫Vue項目的業務邏輯 ——》業務邏輯
AngularJs：
Vue：
9、indexedDB離線數據處理，根據Vue的生命周期，created是每次只執行一次，所以離線數據庫建在created函數里面，在接下來的業務邏輯處理中，取出來使用，讀取、更新、刪除、存儲等操作。在AngularJs項目中，有把數據通過廣播事件$broadcast傳遞出去，在另一個頁面通過$on事件進行接收，然后進行處理，更新數據庫，所以在Vue項目中也應做相應處理，通過$emit事件把需要的事件傳遞出去，再使用$on進行接收，根據Vue的生命周期，$on接收事件是在mounted函數中，進行異步操作更新數據庫，如需要使用的頁面比較多的話，建議把離線的方法進行封裝。
IndexedDB：
AngularJs廣播和接收事件：
Vue傳遞和接收事件：
六、注意事項
1. 可能存在跨域問題；
2. 基地址；
3. AngularJs的廣播與接收事件，在Vue項目中也要做相應處理；
4. AngularJs和Vue的生命周期問題；
5. IndexedDB的處理；
