vux 显示 html,基于 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.οnresize=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，

未完待续。。。