前言
从今年（2017年）年初起，我们团队开始引入「Vue.js」开发移动端的产品。作为团队的领头人，我的首要任务就是设计 整体的架构 。一个良好的架构必定是具备丰富的开发经验后才能搭建出来的。虽然我有多年的前端开发经验，但就「Vue.js」来说，仍然是个新手。所幸「Vue.js」有一个配套工具「Vue-CLI」，它提供了一些比较成熟的项目模板，很大程度上降低了上手的难度。然而，很多具体的问题还是要自己思考和解决的。
项目划分
我们公司的H5产品大部分是嵌套在手机客户端里面的页面。每个项目的功能都比较独立，而且规模不大。这样一来，既可以让这些小项目各自为政，也可以把它们集中放到一个大项目中管理。各自的优缺点如下：
项目模板考虑到我们团队刚开始使用「Vue.js」，需要逐步摸索出合适的架构。如果做成一个大项目，一旦架构要调整，很可能会伤筋动骨。所以最终的选择是 划分成多个小项目 。
虽然划分成多个小项目了，但是这些小项目也要保持一致的架构和公共代码。说白了，就是要根据业务情况搭建自己的项目模板，所有具体的项目都在这个模板的基础上开发。下面就介绍一下我们团队的项目模板的搭建过程。
初始化
项目模板本身也是一个项目，所以也通过「Vue-CLI」来初始化（项目名为「webapp-public」）：
这里选用的是「webpack」模板，因为功能比较齐全。初始化的过程中要注意：
安装「Vue-Router」以支持单页应用；
安装「ESLint」以统一编码规范。
SASS
安装「SASS」的支持比较简单，先通过命令行安装相关依赖：