美团点评酒旅移动端Vue.js最佳实践

作者：胡成全，美团大众点评前端工程师，主要负责美团酒店移动HTML5开发、美团酒店和美团门票小程序开发，目前致力于小程序工程化、小程序和Vue.js代码复用方面的应用。
责编：唐小引，欢迎技术投稿、约稿、给文章纠错，请发送邮件至tangxy@csdn.net。
本文为《程序员》原创文章，未经允许不得转载，更多精彩文章请订阅《程序员》

前言

移动端HTML5因其开发效率高、多端适配能力强而为广大开发者所熟知。而企业级的团队开发对技术成熟度、学习成本、开发便捷性以及大规模应用的架构能力有严格的要求。合理的技术选型，一致的开发规范对前端技术团队尤为重要。

美团点评酒旅前端专注于手机和桌面浏览器，因此不必考虑和客户端共享代码。在对比流行的MVVM框架AngularJS、React和Vue.js后，我们认为，实现上轻量、学习曲线平缓、专注在HTML视图层的Vuejs，能够最大限度地契合酒旅的团队需要。

需要解决的问题

经过前期的快速发展，在完成业务目标的同时，各系统之间的技术选型差异逐渐放大。技术栈不统一带来的开发效率问题日渐突出，系统维护成本显著增加，基础技术建设收效甚微，难以开展。我们面临的问题主要有：

1. 业务线技术栈不统一，AngularJS、Vue.js、jQuery和传统老项目并存，项目切换和维护成本较高；
2. 基础技术建设无法开展，业务和技术组件无法复用，一个技术方案需要多个版本的实现；
3. 团队规模扩大，新人培训和快速切入业务难度大，团队效率下降。
   因此，我们需要解决的核心问题是：
4. 统一技术选型，降低团队学习成本；
5. 完善技术生态，技术方案提取和复用，提高开发效率。

企业级的团队协作

多人协作的前端项目，技术选型需要满足并行开发，能做到较好的模块分解、组件复用、数据和状态管理清晰易于维护。同时兼具良好的开发体验，如开发调试、开发工具和项目脚手架。在这些方面，Vue.js的单文件组件开发方案，Vuex的数据和状态管理方案，能很好地契合预期。

经过反复尝试和探索，我们