因此，我正在学习Vuetify和Vue.js，并尝试制作一个简单的导航栏，但当我使用npm运行应用程序时，我在控制台中看到“无法解析组件”，页面是静态的
我的导航栏。版本：

<template>
    <v-app>
      <v-app-bar color="blue" class="flex-grow-0" app dark>
        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
        <v-app-bar-title>Coding Beauty</v-app-bar-title>
      </v-app-bar>
      <v-navigation-drawer app v-model="drawer">
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title class="text-h6"> Learning Vuetify</v-list-item-title>
            <v-list-item-subtitle> Using Navigation drawers</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
        <v-divider></v-divider>
        <v-list dense nav>
          <v-list-item v-for="item in items" :key="item.title" link>
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>
  
            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
    </v-app>
  </template>
  
  <script>
  export default {
    name: 'App',
    data: () => ({
      items: [
        { title: 'Dashboard', icon: 'mdi-view-dashboard' },
        { title: 'Account', icon: 'mdi-account-box' },
        { title: 'Settings', icon: 'mdi-cog' },
      ],
    }),
  };
  </script>

这是我的应用程序.vue：

<template>
  <div>
    <Navbar />
  </div>
</template>

<script>
import Navbar from '@/components/Navbar.vue'

export default {
  components: {
    Navbar,
  },
};
</script>

我更新了软件包，确保安装了Vuetify等。
这是主要的.ts文件：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Vuetify from 'vuetify';
import Vue from 'vue';
import 'vuetify/dist/vuetify.min.css';

createApp(App).use(router).mount('#app')