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的处理；
