写一个底部导航栏独立组件，便于以后项目中的使用
源码地址：https://github.com/michaelxuzhi/tabbar
分为创建和封装两步
需求：独立、图标可改、名称可改、flex布局
①分析：首先是TabBar
TabBar是导航栏的主框架，包裹整个导航栏
创建tabbar -> Tabbar.vue
// 这里啥都没有
再在App.vue中引用MainTabBar组件
到这里为止，是创建了一个底部导航栏区域，但是里面没有内容，所以Tabbar.vue的高度是0的，也就看不到任何效果，只要给Tabbar.vue的样式加上一点高度，就可以知道现在导航栏区域的样子了，后续会去除这个写死的高度，由TabBarItem的内容来撑开导航栏
height: 50px;
②接着创建TabBarItem，也就是每一个选项
这些选项都是要插进Tabbar.vue中的，所以Tabbar.vue要设置插槽，让每个Item能添加进去
tabbar -> TabbarItem.vue
导航栏中已经设置 display:flex;这里item就设置flex:1; item的高度给到49px，这是通常导航栏的高度，有高度就可以撑开导航栏了，还要设置item中图标的样式
<div class=“tab-bar-item” @click=“itemClick”>
item中用来插入图标和文字
item的图标设置
item的文字设置
给图片和文字使用具名slot是因为TabBarItem也是一个抽离出来的单独组件，最终TabBar.vue和TabBarItem.vue都会集中在MainTabBar中引用并呈现。
首页
分类
层级关系是：
img、text -> tab-bar-item ≈ tab-bar -> main-tab-bar -> App
在MainTabBar.vue中引用并使用了这两个组件，并给子层传递了参数，所以在子层中要用props来接收一下：
这是TabBarItem的逻辑处理
该组件的最终实现需要：导航栏中对应的每一项图标和对应的展示页面
图标的路径在MainTabBar.vue中自行修改，对应的展示页面的话，需要安装vue-router并进行配置
这里结合懒加载简单配置“首页”和“分类”两个对应页面
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
// 引用两个要显示的页面的组件对应文件，使用的是懒加载
const Home = () => import(’…/views/home/Home’);
const Category = () => import("…/views/category/Category");
// 配置路由信息
const routes = [
{
path: ‘’,
redirect : ‘/home’
},
{
path: ‘/home’,
component : Home
},
{
path: ‘/category’,
component : Category
}
]
// 使用的时’history’模式，
const router = new VueRouter({
mode : ‘history’,
routes
})
export default router
最终实现
