vux是一款优秀的移动端UI组件库，强烈推荐使用，下面分享一下自己的踩坑记录~

1.安装必要的包

npm i vux --save
npm i vux-loader --save-dev
npm i less less-loader--save-dev

2.配置build/webpack.base.conf.js

Step1 将原先的module.exports赋值给变量originalConfig

示例：var originalConfig = {...

Step2 在最下方粘贴以下代码

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

3.引用组件

Step1 在src/main.js入口js文件中,引用需要使用的组件

如引用Tabbar：

import { Tabbar, TabbarItem } from 'vux'	//按需引入组件
//全局注册该组件
Vue.component('tabbar', Tabbar)
Vue.component('tabbar-item', TabbarItem)

点击了解：vue组件

Step2 在页面入口组件中App.vue中引用该组件

<tabbar>
      <tabbar-item>
        <span slot="label">自习</span>
      </tabbar-item>
      <tabbar-item show-dot>
        <span slot="label">图表</span>
      </tabbar-item>
</tabbar>

至此vux组件已经安装成功了，截图如下：

4.优化

1.优化样式

在页面入口组件App.vue结尾加上以下代码：

<style lang="less">
@import '~vux/src/styles/reset.less';
</style>

2.配置页面视口

将页面入口文件index.html中的

<meta name="viewport" content="width=device-width,initial-scale=1.0">

替换为

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

3. 消除移动端点击延迟

在页面入口JS文件build/main.js中添加以下代码：

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