Mpvue Mini Program tabBar how to set up, there is a specific description, ask for advice

post the initial code of mpvue-quickstart project creation:
src/app.json:

{
    "pages": [
        "pages/index/main",
        "pages/logs/main",
        "pages/counter/main"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "-sharpfff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
    }
}

src/main.js

import Vue from "vue"
import App from "./App"

import  "../static/weui/weui.css"

Vue.config.productionTip = false
App.mpType = "app"

const app = new Vue(App)
app.$mount()

how do I set up tabBar?

"tabBar": {
      "color": "-sharp999",
      "selectedColor": "-sharp1aad16",
      "backgroundColor": "-sharpfff",
      "borderStyle": "-sharpfff",
      "list": [{
        "pagePath": "pages/counter/main",
        "text": "1"
      }, {
        "pagePath": "pages/index/main",
        "text": ""
      }]
    }
Jan.10,2022

src/main.js

export default {
  // titletabbar
  config: {
    //  ^  webpack entry 
    // eslint
    "pages": [
      "^pages/index/main",
      "pages/tabbar/main"
    ],
    "window": {
      "backgroundTextStyle": "light",
      "navigationBarBackgroundColor": "-sharpfff",
      "navigationBarTitleText": "WeChat",
      "navigationBarTextStyle": "black"
    },
    "tabBar": {
      "color": "-sharp999",
      "selectedColor": "-sharp1aad16",
      "backgroundColor": "-sharpfff",
      "borderStyle": "-sharpfff",
      "list": [{
        "pagePath": "pages/index/main",
        "text": "1"
      }, {
        "pagePath": "pages/tabbar/main",
        "text": ""
      }]
    }
  }
}

src/app.json

{
    "pages": [
        "pages/index/main",
        "pages/logs/main",
        "pages/counter/main",
        "pages/tabbar/main"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "-sharpfff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
    },
    "tabBar": {
      "color": "-sharp999",
      "selectedColor": "-sharp1aad16",
      "backgroundColor": "-sharpfff",
      "borderStyle": "-sharpfff",
      "list": [{
        "pagePath": "pages/index/main",
        "text": "1"
      }, {
        "pagePath": "pages/tabbar/main",
        "text": ""
      }]
    }
}

I really don't understand. Later, I blocked export default {} in main.js, and tabBar is normal.

Menu