【vue3实现微信小程序】设置项目底部tab页面切换标签

====================
快速跳转：
我的个人博客主页👉：Reuuse博客
新开专栏👉：Vue3专栏
参考文献👉：uniapp官网
免费图标👉：阿里巴巴矢量图标库
❀ 感谢支持！☀
==================

前情提要

🔺从现在开始呢，我们就要开始真正的实现一个完整的项目了！❀❀❀
⭐在实现项目的过程中，会将一些比较重要的点进行讲解，确保基础薄弱的宝子们都能够理解！本次博客的开始也算是为了一边学一边做项目❗
那么话不多说我们开始吧

---

---

引言

在uni-app开发中，项目结构的合理设计对于应用的可维护性和扩展性至关重要。本文将通过分析pages.json配置和classify.vue组件的源代码，详细解析uni-app的项目结构和页面布局

---

一、pages.json配置

1. tabBar定义：tabBar对象用于定义应用的底部导航栏。
2. 颜色配置：color和selectedColor属性定义了导航栏图标的默认和选中状态颜色。
3. 导航项列表：list数组定义了导航栏中的每个导航项。
4. 导航项属性：
   • text：导航项显示的文本。
   • pagePath：导航项对应的页面路径。
   • iconPath：导航项未选中时的图标路径。
   • selectedIconPath：导航项选中时的图标路径。

示例：

"tabBar": {
   
  "color": "#9799a5",
  "selectedColor": "#28b389",
  "list": [