从今年（2017年）年初起，我们团队开始引入「Vue.js」开发移动端的产品。作为团队的领头人，我的首要任务就是设计 整体的架构 。一个良好的架构必定是具备丰富的开发经验后才能搭建出来的。虽然我有多年的前端开发经验，但就「Vue.js」来说，仍然是个新手。所幸「Vue.js」有一个配套工具「Vue-CLI」，它提供了一些比较成熟的项目模板，很大程度上降低了上手的难度。然而，很多具体的问题还是要自己思考和解决的。
项目划分
我们公司的H5产品大部分是嵌套在手机客户端里面的页面。每个项目的功能都比较独立，而且规模不大。这样一来，既可以让这些小项目各自为政，也可以把它们集中放到一个大项目中管理。各自的优缺点如下：
项目模板考虑到我们团队刚开始使用「Vue.js」，需要逐步摸索出合适的架构。如果做成一个大项目，一旦架构要调整，很可能会伤筋动骨。所以最终的选择是 划分成多个小项目 。
虽然划分成多个小项目了，但是这些小项目也要保持一致的架构和公共代码。说白了，就是要根据业务情况搭建自己的项目模板，所有具体的项目都在这个模板的基础上开发。下面就介绍一下我们团队的项目模板的搭建过程。
初始化
项目模板本身也是一个项目，所以也通过「Vue-CLI」来初始化（项目名为「webapp-public」）：
vue init webpack webapp-public这里选用的是「webpack」模板，因为功能比较齐全。初始化的过程中要注意：
安装「Vue-Router」以支持单页应用；
安装「ESLint」以统一编码规范。
SASS
安装「SASS」的支持比较简单，先通过命令行安装相关依赖：
npm install node-sass --save-devnpm install sass-loader --save-dev装好后，只要指定style标签的「lang」属性为「scss」，就可以用该语言来编写样式代码了：
<style lang="scss" scoped></style><style src="https://www.jb51.net/style.scss" lang="scss"></style>REM布局
如今移动端的页面为了适应不同尺寸的手机屏幕，大多都在样式代码中使用rem作为尺寸单位。然而，设计师给的设计稿还是以px为单位的。这就需要把px转换为rem，这个转换可以在脑子里面转，也可以通过工具去转，比如「PostCSS」的插件「 postcss-px2rem 」。
初始化项目的时候，「PostCSS」就已经装上了，所以直接安装「postcss-px2rem」即可：
npm install postcss-px2rem --save-dev
装好后还要修改项目根目录下的「.postcssrc.js」，增加「postcss-px2rem」的配置：
"plugins": { "autoprefixer": {}, "postcss-px2rem": { "remUnit": 100 } }
「px值/remUnit」即为转换出来的rem值，可以根据自身需要修改「remUnit」的值。
然而，有些特殊的px值是不需要转换成rem值的，这时候可以通过特殊注释禁止「postcss-px2rem」去处理这个值。例如：
/* 不同dpr下的细线 */ .g-dpr-1 .g-border-1px { border-width: 1px !important; /*no*/ } .g-dpr-2 .g-border-1px { border-width: 0.5px !important; /*no*/ }
Vuex
在单页应用开发中，负责管理状态的「Vuex」也是必备的。安装也非常简单：
npm install vuex --save然而，真正使用的时候，在一些 低版本系统的浏览器 中，可能会出现这样的异常：
Error: [vuex] vuex requires a Promise polyfill in this browser.
这是因为浏览器不支持「Promise」，这时候就需要一个「polyfill」。我们可以直接用「babel-polyfill」：
npm install babel-polyfill --save「babel-polyfill」会在 全局作用域 添加ES6新增的对象和方法，项目中的其他代码并不需要显式地引入（import或者require）它，这就意味着「Webpack」不会把它识别为项目的依赖。所以还要修改「/build/webpack.base.conf.js」，在打包入口处增加「babel-polyfill」：
entry: { app: ['babel-polyfill', './src/main.js'] }
另外要提一下的是，使用「Vue-CLI」初始化项目的时候默认安装了「 babel-plugin-transform-runtime 」，而它的作用跟「babel-polyfill」是重复的，所以可以移除前者。修改根目录下的「.babelrc」，移除这一行：
"plugins": ["transform-runtime"]然后删除依赖即可：
npm uninstall babel-plugin-transform-runtime --save-dev访问路径
每个小项目真正在服务器（不管是测试、预发布还是生产环境的服务器）上运行的时候，是通过一级子目录去区分的。
