vue-5-tabBar创建

目的：在App.vue组件中，加入整个tabbar

思路

　1. 确认完整tabbar的布局，如：

 　　　　tabbar包含两种组件：tabBar组件，tabBarItem组件

　　2. 分析：

　　　　1. 导入tabBar组件和tabBarItem组件

　　　　　注意：

　　　　　　tabBar和tabBarItem两个组件中，只写单独一个的样式，布局，及接收标签即可。

　　　　　　如要求多个tabBarItem，则根据需求，在外侧App.vue中添加tabBar和tabBarItem，要使用几个，就在调用几次。如此例，使用一个tabBar， 四个tabBarItem (tabBarItem写在tabBar中)

　　　　2. App.vue组件中：

　　　　3. 此时，大体结构已经完成：在App.vue组件中，插入一个tabBar，tabBar中插入四个tabBarItem

　　　　4. tabBar组件中：

　　　　　　1. 注意：tabBar中，要接收四个标签，但都是tabBarItem标签，所以此时使用一个插槽足矣，这就可以传入四个 来替换插槽。

　　　　　　2. 定义好自己的整体样式和使内容水平分布 display: flex 。注意：不要设置tabBarItem的样式，只负责tabBar自己

　　　　5. tabBarItem组件中：

　　　　　　1. 其中要插入：点击前图片，点击后图片，文字三种内容。但为了组件更好的移植性，内容不能直接写死在组件中，而是应通过App.vue传入，所以，tabBarItem的中，也使用来接收传入的标签进行替换，与tabBar不同的　　　　　　　　是，传入tabBarItem中的内容，既有点击前后图片，也有文字