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