新版相关技术与协作开发安排分享
老版本存在的问题
老版本存在的问题
- 登录需要加载的初始化文件太多，导致登录页很慢（借助Vue路由懒加载+Webpack打包+Es6（动态加载）机制解决）
- 代码不太规范，使用工具压缩编译不太理想（Eslint（代码检查）+Es6（语法））
- 使用 Jquery ,页面主要是Dom驱动的，Dom操作安规。（Vue数据驱动解决）
- 开发方式还是传统模式，前端工程化和自动化无法使用工具去实现（使用Nodejs平台，Npm+Webpack+Vue全家桶解决）
前端工程化和自动化，可以大大提高工作效率（上线和测试加快，研发是肯定的）
新版技术栈
- Vue全家桶 Vue + Vuex + Vue-Router
- Es6 + Stylus 支持
- 主要工具 Axios （Ajax请求）Webpack（打包）
- 前端服务器 Nodejs平台 Express框架+Webpack （实现热加载）
基本原理
整个前端Mv-Vm思想
|A|B|C|
—— ————————
前端模型层
——————————-
后端
Vue 组件（Components）思想，也是整个系统的 V层 视图层
这里完成 Css Html 和 组件相关自己的数据操作（简单展现逻辑和组件之间数据传递）与组件所需的数据暴露


高效渲染的原理图（把一个普通 Javascript 对象传给 Vue 实例的 Data 选项，Vue 将遍历此对象所有的属性，并使用 Object.Defineproperty 把这些属性全部转为 Getter/Setter。Object.Defineproperty 是仅 Es5 支持，且无法 Shim 的特性，这也就是为什么 Vue 不支持 Ie8 以及更低版本浏览器的原因。）

Vue-Router (有Vm，也就是Control 但是我觉Vm在整个系统中流转)
这里完成组件的跳转和数据传递的操作，我们自己完成一个这样路由很简单，但是Vue-Router还有很多用处（我们暂时就结合Es6和Webpack完成了Js动态加载（什么时候用什么时候去取））

Vuex
- 这里是我们前后端共同协作的最主要的地方，也就是上面说的前端模型层（相当于M）由一个单一状态树对象缓存.绝大部分的Dom展现与消失都依赖于这里的数据变化（数据变化是由于用户的操作与Http请求的交互）

大家看图之后应该很明白
Action
Action 是异步的 ，返回的值是一个 Promise对象
- 与后端接口最紧密的就是Action这块，这里就是前段的M层与后端接口交互的地方，
- 这里会处理一些业务逻辑后封装成初步的M层的状态对象，再把封装的初步的状态对象 Commit（）（提交给）Mutations
- 与后端接口最紧密的就是Action这块，这里就是前段的M层与后端接口交互的地方，
- 这里是我们前后端共同协作的最主要的地方，也就是上面说的前端模型层（相当于M）由一个单一状态树对象缓存.绝大部分的Dom展现与消失都依赖于这里的数据变化（数据变化是由于用户的操作与Http请求的交互）
上面是后端能够帮助我们前端工作的地方，写相关接口和Action
- 通过Mtation再去挂载和修改状态对象（Mutation是改变State的唯一路径，不能直接去改变State值）

- 在通过改变的State去改变 Vue组件，再去渲染视图
下面就借着系统，说明一下上面的具体实现
接口声明

注册Store （State,Mution,Action,Getter)


通过这个改变State
相关组件或Store触发 Mution（Commit），Action（Dispath）改变State State与Getter作用于渲染视图

通过这个来触发注册的Action，进行相关组件和数据的初始化操作