基于 VUX 构建移动端项目

VUX，样式基于 WeUI，的vue移动端开发库，集成众多实用插件

方式一，基于新项目安装

npm install vue-cli -g # 如果还没安装
vue init airyland/vux2 projectPath

cd projectPath
npm install ||  cnpm install ||  yarn
npm run dev   #  或者  yarn dev

方式二，基于现有项目安装

1，安装 vux

npm install vux --save

2，安装 vux-loader

npm install vux-loader --save-dev

3，安装less

npm install less less-loader --save-dev

4，修改配置

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']
})

完成以上步骤，就可以愉快的使用vux啦！

其他配置

虽然完成成上面的步骤就可以开始项目了，但是为了更好的优化项目，还需要做一下的修改；

1，autoprefix 推荐配置

vue官方模板的设置是last 2 versions，可能会导致你在某些Android机子上出现问题。
如果你使用last 7 versions会生成不必要的-ms前缀代码.
因此建议同WeUI一样，使用配置['iOS >= 7', 'Android >= 4.1']

在 vux-loader 里配置

如果你没有在postcss里配置，你可以直接配置vux-loader的duplicate-style插件：

{
  name: 'duplicate-style',
  options: {
    cssProcessorOptions : {
      safe: true,
      zindex: false,
      autoprefixer: {
        add: true,
        "browsers": [
          "iOS >= 7",
          "Android >= 4.1"
        ]
      }
    }
  }
}

2，解决移动端页面点击延迟

vux已集成了fastclick，无需另外安装即可在main.js里引用fastclick

const FastClick = require('fastclick')
FastClick.attach(document.body)
// done

3，rem布局

市面上手机的机型众多，分辨率也是千奇百怪，因此很难一个个去做适配
rem 能很好的解决这个问题，不懂的同学可以看看手淘rem布局详解

export default function fontSizeInit(){
  var html=document.documentElement;
  var hWidth=html.getBoundingClientRect().width;
  if(hWidth>800){hWidth=414}
  html.style.fontSize=hWidth/10+"px"
}
window.onready=fontSizeInit();
window.onresize=function(){fontSizeInit()};

在这里使用的是iphone 6/7/8 的标准分辨率，因此根httml字号为font-size: 37.5px;
在css中转化以50px为例，rem为 50 / 37.5 rem
要是每次运算都这样手动计算，未免也太繁琐了，以此你可以借助sass或less

// 定义
@function to_rem($px){
  @return ($px / 37.5px) * 1rem
}
// 调用
height: to_rem(50px)

4，

未完待续。。。