手把手教你vue3-ts-uniapp-vite创建多端小程序-2 设置底部导航

1.打开项目，打开pages.json ，设置底部导航栏。注意pages中的path和tabBar中list中的path要一致

{
	"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
        {
			"path": "pages/project/index",
			"style": {
				"navigationBarTitleText": "项目"
			}
		},
        {
			"path": "pages/delivery/index",
			"style": {
				"navigationBarTitleText": "送货"
			}
		},
       {
			"path": "pages/my/index",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}
	],
  "tabBar": {
		"color": "#BBBAC7", 
		"selectedColor": "#2c2c2c", 
		"borderStyle": "black",
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/home.png",
				"selectedIconPath": "static/home-active.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/project/index",
				"iconPath": "static/customer.png",
				"selectedIconPath": "static/customer-active.png",
				"text": "项目"
			},
			{
				"pagePath": "pages/delivery/index",
				"iconPath": "static/business.png",
				"selectedIconPath": "static/business-active.png",
				"text": "送货"
			},
            {
				"pagePath": "pages/my/index",
				"iconPath": "static/my.png",
				"selectedIconPath": "static/my-active.png",
				"text": "我的"
			}
		]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}