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发步上线)

3.目录结构
|——README.md
|——build #build脚本
|——config #prod/dev build config等文件
|——hera #代码发布上线
|——index.html #最基础的网页
|——package.json
|——src #Vue.js核心业务
| |——App.vue #App Root Component
| |——api #接入后端服务的基础API
| |——assets #静态文件
| |——components #组件
| |——event-bus #Event Bus事件总线，类似EventEmitter
| |——main.js #Vue入口文件
| |——router #路由
| |——service #服务
| |——store #Vuex状态管理
| |——util #通用utility，derective，mixin还有绑定到Vue.prototype的函数
| |——view #各个页面
|——static #DevServer静态文件
|——test #测试

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>如果后端返回