Vue项目架构设计与工程化实践

摘自Berwin《Vue项目架构设计与工程化实践》github.com/berwin/Blog/issues/14
1.Vue依赖套件
vuex：项目复杂后，用vuex来管理状态
element-ui：基于vue2.0的组件库
vue-router：单页面应用必须使用的前端路由
axios：vue官方推荐的http客户端
vue-cli：webpack模板，功能全。有hot reload,linting,testing,css extraction等

2.整体架构设计
表现层： Store Router View Component
业务层：服务（Service）
API层：接口API Mock + Validator
Util层： Util
基础设施层：init(初始化配置文件) dev(开发环境) deploy(编译源码，静态文件上传cdn，Hera发步上线)

4.模块
表现层：
store Vuex状态管理
router 前端路由
view 各业务页面
component 通用组件
业务层：
service 处理服务端返回的数据（类似data format）例如service同时调用了不同的api，把不同的返回数据整合在一起发送到store中
API层：
api 请求数据，Mock数据，反向校验后端api
Util层
util 存放项目全局的工具函数
... 如果项目需要，可写一些vue指令
基础设施层
init 自动化初始化配置文件
dev 启动dev-server，hot-reload，http-proxy等辅助开发
deploy 编译源码，静态文件上传cdn，生成html，发布上线
全局事件机制
event-bus 主要用来处理特殊需求

5.特殊场景
1>在router中拿不到vue实例，无法直接操作vuex的方法，此时采用event-bus
2>生存周期不同步问题：event-bus的生存周期是全局的，只有在页面刷新的时候，event-bus才会重置内部状态，而组件的声明周期相对来说短了很多

6.登录功能逻辑

client          ——请求数据——>       server
            <——返回未登录错误码——

            ——>跳转 登录中心
            <——sid

            ——请求数据（携带sid）——>
            <——返回数据 + 种cookie——

            ——请求数据（携带cookie）——>
            <——     返回数据   ——
 1>监听所有api的响应，如果未登录后端会返回一个错误码
 2>如果后端返回

Vue项目架构设计与工程化实践

猜你喜欢