vue-打造webapp项目的脚手架

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搭建项目

初始化项目结构

2.配置Vuex
在src目录中，新建一个store目录，用于存放全局状态，可以参考文章vue进阶 - vuex安装及使用

src目录

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