1.引入mint-ui

1).使用 vue-cli

npm install -g vue-cli
vue init webpack projectname

2). 部分引入
在main.js中写入：

import 'mint-ui/lib/style.css'
import { Tabbar, TabItem } from 'mint-ui';

2.引入tabbar

在main.js中写入：

Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);

vue中app.vue 和main.js的关联：
main.js是入口文件， 作用：初始化vue实例并使用需要的插件。
App.vue是主组件，所有页面都是在App.vue下进行切换的，所有的路由都是App.vue的子组件。

3.使用tabbar

html:

<mt-tabbar v-model="selected">
  <mt-tab-item id="首页">
    <img slot="icon" src="">
     首页
  </mt-tab-item>
  <mt-tab-item id="分类">
    <img slot="icon" src="">
     分类
  </mt-tab-item>
  <mt-tab-item id="发现">
   <img slot="icon" src="">
     发现
  </mt-tab-item>    
  <mt-tab-item id="购物车">
   <img slot="icon" src="">
     购物车
  </mt-tab-item>
  <mt-tab-item id="我的">
     <img slot="icon" src="">
     我的
  </mt-tab-item> 
 </mt-tabbar>     

js:

<script>
  export default {
    name: 'home',
    data () {
      return {selected: '首页'}
    },
    watch: {
      selected: function (val, oldVal) {
        console.log(val)
        // click后打印出当前mt-tab-item的id
      }
    }
  }
</script>

效果：

tabbar.png