一、未创建项目

如果项目还没有创建，可以套用vux2模板，快速开始：

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

cd projectPath
npm install --registry=https://registry.npm.taobao.org # 或者 cnpm install 或者  yarn
npm run dev #  或者  yarn dev

二、已创建项目

1、安装

打开终端，进入项目目录，输入：
npm install vux --save
或cnpm install vux --save

安装vux-loader：
cnpm install vux-loader --save

安装less-loader：
cnpm install less-loader --save

安装 yaml-loader：
cnpm install yaml-loader --save

2、配置

打开build/webpack.base.conf.js文件，添加如下代码：

const vuxLoader = require('vux-loader')

module.exports = {...}修改为
const webpackConfig = {...}

在文件尾部添加代码：

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

以下步骤可省略：

打开App.vue，引入初始化样式（已有可不引入）

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

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

添加 webpack plugin, 在构建后去除重复css代码（通过配置vux-loader实现）

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

在main.js添加 Fastclick 移除移动端点击延迟

import FastClick from 'fastclick'
FastClick.attach(document.body)

3、使用

试验一下：

<tab>
  <tab-item selected @on-item-click="onItemClick">已发货</tab-item>
  <tab-item @on-item-click="onItemClick">未发货</tab-item>
  <tab-item @on-item-click="onItemClick">全部订单</tab-item>
</tab>

<script>
import { Tab, TabItem } from 'vux'
export default {
  components: {
    Tab,
    TabItem
  },
  methods: {
    onItemClick () {

    }
  }
}
</script>

完成！！！

网址：https://doc.vux.li/zh-CN/components/actionsheet.html
根据具体情况选择合适组件