Vue Mint UI tabbar切换

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:

  
    
     首页
  
  
    
     分类
  
  
   
     发现
      
  
   
     购物车
  
  
     
     我的
   
      

js:

效果：

tabbar.png