新建tabBar分支
1.通过 Git 管理项目，养成良好的开发习惯，可以创建分支。最后开发完可以合并分支。
创建新分支并且跳转到改分支上
git checkout -b tabbar
2.查看分支
git branch
配置 tabBar
第一步：由于我们需要自定义图标，但是对于 vite 引入图片没有直接引入，需要先封装一个工具函数 load-assets.js
// load-assets.js // 工具函数--基于 Vite 获取资源 export const getAssetURL = image => { // 参数1：绝对路径 // 参数2：当前路径的RRL return new URL(`../assets/img/${image}`, import.meta.url).href }
第二步：先创建自己的一个tabBar数组常量 tabBar.js
const tabBarData = [ { text: "首页", image: "tabbar/tab_home.png", imageActive: "tabbar/tab_home_active.png", path: "/home" }, { text: "收藏", image: "tabbar/tab_favor.png", imageActive: "tabbar/tab_favor_active.png", path: "/favor" }, { text: "订单", image: "tabbar/tab_order.png", imageActive: "tabbar/tab_order_active.png", path: "/order" }, { text: "消息", image: "tabbar/tab_message.png", imageActive: "tabbar/tab_message_active.png", path: "/message" } ] export default tabBarData
1. 利用 Vant 引入tabBar样式
2. 修改 tabBar 样式
完整代码
// tab-tab.vue <template> <div class="tab-bar"> <van-tabbar v-model="currentIndex" active-color="#38B0DE" > <template v-for="(item, index) in tabBarData" :key="index" > <van-tabbar-item :to="item.path"> <span>{{item.text}}</span> <template #icon> <img v-if="currentIndex !==index" :src="getAssetURL(item.image)" > <img v-else :src="getAssetURL(item.imageActive)" > </template> </van-tabbar-item> </template> </van-tabbar> </div> </template> <script setup> import tabBarData from "@/assets/data/tabBar.js"; import { getAssetURL } from "@/utils/load-assets.js"; import { ref } from "vue"; const currentIndex = ref(0) </script> <style lang="less" scoped> .tab-bar { // 找到我们需要修改的类名字，对类中的Css进行重写 // :deep(.class)找到子组件的类，让子组件的类也可以生效 :deep(.van-tabbar-item__icon) { font-size: 50px; } :deep(.van-tabbar-item__text) { font-size: 14px; } img { height: 28px; } } </style>
3. 修改第三方UI组件库方法总结
- 用插槽，出入自己的元素—> 那么在自己的作用域中可以直接修改这个元素
- 全局定义一个变量，覆盖它默认的变量值—>需要全局修改（不推荐）
- 布局定义一个变量，覆盖它默认变量的值—> 布局修改
- 直接找到对应子组件的选择器，进行修改—> 使用 :deep(子组件中元素的选择器)进行修改—>直接修改CSS样式
首页搭建
1. navBar 的封装
2. 轮播图样式编写
3. 定位样式编写
Git 管理和代码托管（github）
1.添加到暂存区
git add .
2.添加到仓库
git commit -m "tabbar分支"
3.推送代码
git push -u origin tabbar
4.将本地的tabbar 分支 合并到主分支上master （注意要先切换在主分支上）
git checkout mater
5.分支合并
git merge tabbar
6.更新远程仓库 master 分支
git push
7.删除tabbar分支
git branch -d tabbar
