VUE3 App.vue 引入nutui tabbar 开发环境组件无法被编译成正常div和class

Question

VUE3 App.vue 引入nutui tabbar 开发环境组件无法被编译成正常div和class

<!--App.vue-->
<template>
  <router-view></router-view>
  <Tabbar />
</template>

<script setup>
import Tabbar from '@/components/tabBar'
</script>

<!--tabBar.vue-->
<template>
   <nut-tabbar :bottom="true" :safeAreaInsetBottom="true">
    <nut-tabbar-item 
      :bottom="true" 
      :safeAreaInsetBottom="true"
      v-for="$item in NavBar"
      :tab-title="$item.title"
      :href="$item.href"
      :icon="$item.icon"
      />
  </nut-tabbar>
</template>

<script setup>
  const NavBar = [
    {
      title: '工单列表',
      icon: 'category',
      href: '/work_order_list'
    },
    {
      title: '区域库存',
      icon: 'dshop',
      href: '/reginal_inverntory_list'
    },
    {
      title: '调拨请求',
      icon: 'people',
      href: '/reginal_inverntory_allot_apply'
    }
  ]
</script>