vue-cli虽然强大，但是它有很多个步骤要我们去选择配置，而实际上公司业务很多配置是固定的，比如要安装vue-router、规定了必须使用sass，这样在vue-cli配置完成后还必须要npm install node-sass和sass-loader，还有axios等也是一定要安装的。所以不应该每次新建一个项目都去一步步选择vue-cli的那些配置然后还要去安装sass等，应该在vue-cli基础上根据公司自身的情况打造团队的脚手架，只需运行脚手架，就可以初始化整个项目。
GitHub地址是：vue-cli整合vux，打造webapp的项目脚手架
技术栈
Vue.js : 前端页面展示
Vuex : 全局状态通信
axios：网络请求
Vue-router：路由跳转,实现单页的核心
Vux：移动端UI组件库
fastclick：去除点击延时
vue-scroller：刷新组件
reset.css：初始化浏览器样式
flexible.js：移动端rem布局
打造目录结构
1.通过vue-cli，初始化vue项目
可以参考我的上一篇文章vue-cli入门（一）-使用vue-cli搭建项目
其中，src是项目文件存放目录，src/assets和static/是两个存放静态资源的目录，之间的区别是：static目录中的静态资源不会被webpack处理，这里适合放一些外部不需要webpack处理的资源，build后的静态资源都会被放进这个目录。
2.配置Vuex
在src目录中，新建一个store目录，用于存放全局状态，可以参考文章vue进阶 - vuex安装及使用
3.配置Vue-router
通过vue-cli，初始化vue项目，默认是安装了Vue-router，我们不需要在另外安装，使用可以参考我的另一篇文章vue进阶 - vue-router安装及使用
4.配置axios
可以参考我的另一篇文章vue进阶 - axios安装及使用
5.配置Vux
官方地址查看官网的安装使用说明，
直接安装或者更新：
npm install vux --save
安装vux-loader
npm install vux-loader --save-dev
安装less-loader以正确编译less源码
npm install less-loader --save-dev
vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置：
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
6.安装sass
安装node-sass和sass-loader
npm install node-sass --save-dev
npm install sass-loader --save-dev
vue-cli生成的项目，已经默认加入了处理sass的loader，只需要这样即可
<style lang="scss" scope>
</style>
7.添加Fastclick移除移动端点击延迟
安装fastclick
npm install fastclick --save
在main.js中引用
import FastClick from 'fastclick'
FastClick.attach(document.body)
8.安装vue-scroller
安装
cnpm install vue-scroller -S
使用,在main.js中引用
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
使用方法可以参考vue-scroller
9.初始化浏览器样式
下载地址：cssreset
10.移动端rem布局
移动端rem布局方案：flexible.js
使用参考资料：使用Flexible实现手淘H5页面的终端适配
安装 lib-flexible，完成后在 main.js 中引入
npm i lib-flexible --save
// main.js
import 'lib-flexible/flexible';
使用postcss-pxtorem自动转换rem（不推荐使用，发现不会转化vux框架里面的px）
1.安装 postcss-pxtorem
npm install postcss-pxtorem -D
2.在.postcssrc.js中做如下配置
module.exports = {
"plugins": {
"postcss-pxtorem": {
rootValue: 37.5, //换算基数(根据html的字体大小）
unitPrecision: 3, //计算后的最小精度值，默认保留5位
propList: ["*",'!font*'], //设置哪些属性可以px转换rem, !不匹配属性（这里是字体相关属性不转换）
selectorBlackList: [], //过滤，给定哪些选择器不转换rem，保留px
replace: true,
mediaQuery: false, //Boolen类型，是否允许在媒体查询中转换px
minPixelValue: 2 // 替换的最小像素值
}
}
}
或者用px2rem-loader，配置方法自行百度。
fastclick与ios11.3相关bug原因分析
问题1：在ios 11.3移动端页面 input输入框第一次触摸可以弹起键盘，后续再触摸需要很难弹起键盘，或者需要在输入框停一会才能弹起键盘。
解决方法：
Issues中给出的修复方法是强制元素focus，即在改写的focus响应函数中直接触发元素的focus事件：
方法一：修改源代码：
if(deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
length = targetElement.value.length;
targetElement.focus();
targetElement.setSelectionRange(length, length);
} else {
targetElement.focus();
}
方法二：修改原型方法
FastClick.prototype.focus = function(targetElement) {
targetElement.focus();
};
问题2：当app或锁屏超过几分钟时间，回到页面会导致click事件失效。
解决方法：
github有相关的解决代码，下载替换原文件
地址一
地址二
我本人也上传了一个版本，同时解决了问题1,2
gitgub地址
参考文献：
fastclick解析与ios11.3相关bug原因分析
iOS11.3 fastclick.js相关bug
fastclick
