【Vue3.0移动端项目–旅游网】–配置tabBar &首页搭建

多一些不为什么的坚持🤳

贤蛋 🥚大眼萌 ，一名很普通但不想普通的程序媛🙊

📝本文章收录于专栏：Vue3.0移动端项目-旅游网

第一篇：【Vue3.0移动端项目–旅游网】–项目初始化搭建

✏️ 新建tabBar分支

通过 Git 管理项目，养成良好的开发习惯，可以创建分支。最后开发完可以合并分支。

1. 创建新分支并且跳转到改分支上

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组件库方法总结

1. 用插槽，出入自己的元素—> 那么在自己的作用域中可以直接修改这个元素

2. 全局定义一个变量，覆盖它默认的变量值—>需要全局修改（不推荐）

3. 布局定义一个变量，覆盖它默认变量的值—> 布局修改

4. 直接找到对应子组件的选择器，进行修改—> 使用 :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