AngularJs项目转Vue项目技术方案

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