项目背景:一款小有名气的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分别配置了内测,外测和生产环境的执行命令,下面以测试环境为例具体讲下整个发布流程
最后想说的是,整套工程从零搭建下来自己学到非常多的东西,目前使用下来整体开发效率得到质的提升,就如尤神说的,技术本质就是把高大上的东西变得平易近人,我也正朝着这个方向在努力