最近工作总结-从零构建前后端工程分离

项目背景：一款小有名气的OTA应用，在境外租车赛道排名前列，因为历史原因，技术栈使用的asp.net mvc,路由跳转靠后端完成，虽然前端使用angularjs作为开发框架，但前后端耦合问题依旧严重，在快速迭代中已经不堪重负，基于此，前后端分离已经是迫在眉睫要做的事情。

技术栈 为什么我选择了vue而不是React

技术栈的选择上，并没有太过纠结，使用了时下最火的MVVM框架vue.js,当时也是考虑个人对vue掌握程度要远超过react(如果vue驾驭程度能有90分的话，react只有50,60)，并且团队其他队员从angular切换到vue上成本也会更小。

MVVM     vue.js 2.3+

ajax         vue-resource

状态管理  vuex

路由         vue-router

css预处理  less

构建脚手架工具   cooking-cli

其他第三方库使用  mobiscroll，Swiper.js ，少量的lodash模块和少量的mint-ui组件

这里说一下为什么使用cooking-cli作为脚手架工具，最早接触vue时候只有官方的vue-cli(当时貌似版本是1.0)，说是脚手架，其实自己要做太多的配置,偶然间使用饿了么团队开发了cooking，极大的节省了我前期项目配置时间，即使cooking不能满足你的需求，你也可以引入原生webpack提供插件解决问题。

项目结构组成

所有的业务文件都已vue官方推荐的大型组件化开发方式来开发，通过webpack dev server反向代理获取api数据，初始化数据在入口组件获得，然后通过props方式分发到各组件当中。组件之间数据通过vuex来共享，配合vue-devtools可视化界面能清晰看到数据流动。

为什么是多页而不是单页应用

这个问题参考了美团，饿了么等大型团队，因为可能某些页面会被分发到第三方应用中，所以采用局部单页模式，不至于出现数据管理混乱（其实我们是有能力开发全单页应用的，哈哈哈）

发布

目前，我厂这套前端工程体系配合Jekins实现了全自动发布，在package.json文件通过cross-env分别配置了内测，外测和生产环境的执行命令，下面以测试环境为例具体讲下整个发布流程

最后想说的是，整套工程从零搭建下来自己学到非常多的东西，目前使用下来整体开发效率得到质的提升，就如尤神说的，技术本质就是把高大上的东西变得平易近人，我也正朝着这个方向在努力