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的關(guān)聯(lián)：
main.js是入口文件， 作用：初始化vue實(shí)例并使用需要的插件。
App.vue是主組件，所有頁面都是在App.vue下進(jìn)行切換的，所有的路由都是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="發(fā)現(xiàn)">
   <img slot="icon" src="">
     發(fā)現(xiàn)
  </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后打印出當(dāng)前mt-tab-item的id
      }
    }
  }
</script>

效果：

tabbar.png