一、样式
1.创建项目完毕后删除默认文件
2.assets文件里创建img和css文件夹
3.css里创建base.css,创建默认样式,并在app.vue中引用，@import "..."
4.写tabbar样式
（1）开启flex布局disp
（2）子元素：flex:1 均等分
text-align: center 子元素内部文字居中
height:49px 移动端底部导航栏一般高度都是49px
box-shadow: 0 -1px 1px rgba(100,100, 100, .2) 设置导航栏上面一条线的阴影
（3）开启定位，底部导航栏，设置背景颜色#f6f6f6
因为是底部导航栏，所以用fixd
position:fixd
left：0
right：0
bottom：0
二、封装上面的样式
1.compents文件夹里创建tabbar文件夹，创建TarBar文件
2.剪切放到template里面
<div id="tar-bar">
<div class="tab-bar-item">首页</div>
<div class="tab-bar-item">分类</div>
<div class="tab-bar-item">购物车</div>
<div class="tab-bar-item">我的</div>
</div>
3.剪切放到style里面，注意： @import不能剪掉，因为子组件里面不能用，会报错
#tar-bar{
display: flex;
background-color: #f6f6f6;
position: fixed;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 -1px 1px rgba(100,100, 100, .2);
}
.tab-bar-item{
flex:1;
text-align: center;
height: 49px;
}
4.引入TarBar到App.vue里面
import TabBar from './components/tabbar/TabBar.vue'
导入组件还要在components里面注册
components:{
TarBar
}
然后就可以在div里面使用了 注意：html里忽略大小写，不能用驼峰，所以只能用-
<tab-bar></tab-bar>三、导入图片，这个简单，div里写img就行，然后style设置下样式即可
.tab-bar-item img{
width: 24px;
height: 24px;
}
四、重点，将Tarbar父元素里的div里的所有子组件封装，同时整个插槽，再创建子组件文件用tabbaritem
先在tarbar中加入插槽，再再tabbaritem中放入具名插槽，再app.vue文件中使用插槽，得用四次，相当于用四次这个组件，别忘了注册，不难理解
代码如下
App.vue：
<tab-bar>
<tab-bar-item>
<img slot="item-icon" src="./assets/img/tabbar/home.png" alt="">
<div slot="item-text">首页</div>
</tab-bar-item>
<tab-bar-item>
<img slot="item-icon" src="./assets/img/tabbar/categories.png" alt="">
<div slot="item-text">分类</div>
</tab-bar-item>
<tab-bar-item>
<img slot="item-icon" src="./assets/img/tabbar/shopcart.png" alt="">
<div slot="item-text">购物车</div>
</tab-bar-item>
<tab-bar-item>
<img slot="item-icon" src="./assets/img/tabbar/profile.png" alt="">
<div slot="item-text">我的</div>
</tab-bar-item>
</tab-bar>
TabBarItem:
<slot name ="item-icon"></slot>
<slot name ="item-text"></slot>
TarBar:
<slot></slot>
五、添加动态图标，即home_active等
1.在tabbaritem里添加新插槽，并在app文件中引用
<img slot="item-icon-active" src="./assets/img/tabbar/shopcart_active.png" alt="">
2.将tabbaritem中三个插槽同时用div包裹起来，再用v-if来判断并展示是否活跃时的图片
<div v-if="!isActive"> <slot name ="item-icon"></slot></div>
<div v-else><slot name ="item-icon-active"></slot></div>
这是文字是否变红，动态绑个class
3.别忘了在data中添加isA
<div :class="{active:isActive}"><slot name ="item-text"></slot></div>ctive变量
六、改写vue-router
本来是这样：
export default new Router({
routers:[
]
})
改写：
const routers = [
{
path:
redirect:
},
{
path:
component:
}
]
const router = new Routers({
routers,
})
export default router七、创建新文件夹views，视图，放的就是一系列子组件，注意不是导航栏子组件，区分开来
一个视图单独弄一个文件夹，文件夹里放子组件，比如/views/home/Home.vue
八、配置映射关系，别忘了router-view
在第六步的基础上使用懒加载引用,比如：
const Home =()=>import('...')
九、写入监听点击函数
注意：要在TabBarItem里面监听
<div class="tab-bar-item" @click="itemClick">
用props是因为父传子，父组件app的数据传给子组件TabBarItem，在子组件里写props
App.vue里面：比如：
<tab-bar-item path="/home">TabBarItem里：
props:{
path: String
},
methods:{
itemClick(){
this.$router.replace(this.path).catch(err=>err)
}
}
最后改下哈希值
十、动态绑定字体颜色
在app中的tabbaritem标签添加 activeColor = "blue"
然后通过props传过去
props:{
activeColor:{
type:String,
default:'red'
}
},
但是传过去要去使用，如下v-bind：style...
<div :style="activeStyle"><slot name ="item-text"></slot></div>
在计算属性中添加activeStyle
下面是用来判断tabbaritem中的四个组件是否活跃
isActive(){
return this.$route.path.includes(this.path) == this.$route.path也就是index.js里的path，this.path是tabbaritem中由app传过来的动态的path，如果相同那就是处于活跃，就返回true
},
activeStyle(){
return this.isActive ? {color:this.activeColor} : {}
}
},