一、 前端思考

将数据展示在不同硬件上的一套规则

• 颜色样式规则 —— css

• 交互跳转规则 —— js

需要什么

1. 数据

2. 页面跳转规则

3. 全局状态管理

4. 公共方法引入

5. 具体页面

当前项目(vue+cordova)对应的支持

1. axios ： 从后台拿到数据

2. vue+router ： 前端路由

3. vuex ： vue项目状态管理

4. utils ： 自己封装的公共方法

5. pages: 根据ui图和原型图组织

RN项目对应的支持

1. axios ： 从后台拿到数据，vue+RN都可以集成

2. react-navigation ：RN前端路由

3. react-redux : RN状态管理

4. utils : 自己封装的公共方法

5. pages: 根据ui图和原型图组织

其他项目

• 万变不离其中，前端四条腿封装好，不管技术栈如何变，项目不会偏

二、敏捷开发思考

15.jpg

16.jpg

三、 项目相关

层级关系

• 顶层业务，具体根据ui图和原型图划分板块，填写css规则和js规则

• 四条腿支撑业务跑起来，通过vue原型注入到业务组件中

• webpack完美提供环境配置，打包发布部署h5等工作，vue底层api构建项目基础

• cordova提供webview+webpack打包成的h5文件，变为app。

注意：app需要灵活使用androidStudio和xcode工具

11.jpg

项目组织结构

封装项目的四条腿

• 接口的具体路径配置在api，接口请求成功失败的回调拦截在config/axios

• 路由的具体路径配置在router，路由的全局导航守卫在config/router

• 公共方法在utils，只导出了method，常量/指令/过滤器/正则使用时通过具体路径导入

• 全局状态vuex在store

12.jpg

公共组件树

• common存放公共业务组件，板块间可复用；

• ui存放公共ui组件，同技术栈可复用

13.jpg

customer用户板块页面组件树

• 文件夹根目录下全为页面组件

• item中为页面不可复用小板块组件

• components中为页面可复用组件

14.jpg