1、創建項目
①項目名稱：自定義，【我是travel】
②vue版本：vue3
③其他默認，最后創建
2、創建頁面
①展開自己剛才創建的項目
②單擊選中pages文件夾 --->鼠標右鍵---->新建頁面
③頁面名稱：自定義favourite、like、collect......（這里是個收藏/點贊/喜歡的類似意義的頁面）
④勾選：創建同名目錄
⑤選擇模版：使用scss的頁面?
⑥勾選：在pages.json中注冊
⑦最后一步：創建（其他自選或者默認）
我們用類似方法在創建一個類似“我的/個人中心”意義的頁面，my、personal_center......
3、pages.json中注冊tarbar ，將代碼添加進去
需要添加的代碼
// 底部導航tabBar"tabBar": {// 所有底部導航文字顏色"color": "#8183ff",// 所有底部導航文字選中后的顏色"selectedColor": "#0901ff",// 所有底部導航背景色顏色"backgroundColor": "#fff",// 底部導航列表"list": [// 第一個導航：// text：底部導航文本，// pagePath：底部導航鏈接路徑，例如如果是favourte頁面路徑，那么點擊就會跳轉到我的收藏頁面// iconPath：底部導航圖標，這里是uniapp默認的{"text": "首頁","pagePath": "pages/index/index","iconPath": "static/logo.png"},{"text": "我的收藏","pagePath": "pages/favourite/favourite","iconPath": "static/logo.png"},{"text": "個人中心","pagePath": "pages/personal_center/personal_center","iconPath": "static/logo.png"}]},完整代碼
{"pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages{// 頁面路徑"path": "pages/index/index","style": {// 頁面標題"navigationBarTitleText": "首頁"}},{// 頁面路徑"path": "pages/favourite/favourite","style": {// 頁面標題"navigationBarTitleText": "我的收藏"}},{// 頁面路徑"path": "pages/personal_center/personal_center","style": {// 頁面標題"navigationBarTitleText": "個人中心"}}],// 底部導航tabBar"tabBar": {// 所有底部導航文字顏色"color": "#8183ff",// 所有底部導航文字選中后的顏色"selectedColor": "#0901ff",// 所有底部導航背景色顏色"backgroundColor": "#fff",// 底部導航列表"list": [// 第一個導航：// text：底部導航文本，// pagePath：底部導航鏈接路徑，例如如果是favourte頁面路徑，那么點擊就會跳轉到我的收藏頁面// iconPath：底部導航圖標，這里是uniapp默認的{"text": "首頁","pagePath": "pages/index/index","iconPath": "static/logo.png"},{"text": "我的收藏","pagePath": "pages/favourite/favourite","iconPath": "static/logo.png"},{"text": "個人中心","pagePath": "pages/personal_center/personal_center","iconPath": "static/logo.png"}]},"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {}
}4、運行到內置瀏覽器
頂部菜單欄---->運行----->運行到內置瀏覽器------>最右邊會有頁面效果，預覽按鈕下邊（如圖）
（其他也可以選如果你會的話，可能需要配置或者下載，這里不過多贅述）
可以點擊tabbar嘗試一下，選中前的顏色，選中后的顏色，以及切換頁面的效果
（也可以自己更改背景顏色以及字體顏色效果，或者自行查詢其他效果哦）
