将 vuetify 添加到 vite 项目时出现错误

Question

我创建了一个 vite 项目，创建了一个导航组件，创建了一个路由器，然后通过运行 npm i vuetify 将 vuetify 添加到项目中。我现在收到以下错误：

Uncaught Error: [Vuetify] Could not find injected layout at useLayoutItem (chunk-E7QQUSJ2.js?v=0b7a6fc0:121:11) at Object.setup [as _setup] (vuetify_components.js?v=0b7a6fc0:1505:9) at setup (chunk-ULC6QWEU.js?v=0b7a6fc0:1145:24) at callWithErrorHandling (chunk-PD2AWGJV.js?v=0b7a6fc0:1652:19) at setupStatefulComponent (chunk-PD2AWGJV.js?v=0b7a6fc0:9063:25) at setupComponent (chunk-PD2AWGJV.js?v=0b7a6fc0:9024:36) at mountComponent (chunk-PD2AWGJV.js?v=0b7a6fc0:7354:7) at processComponent (chunk-PD2AWGJV.js?v=0b7a6fc0:7320:9) at patch (chunk-PD2AWGJV.js?v=0b7a6fc0:6786:11) at ReactiveEffect.componentUpdateFn [as fn] (chunk-PD2AWGJV.js?v=0b7a6fc0:7464:11)

我刚刚添加了一个 .use(vuetify) ，它弄乱了整个代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
    components,
    directives,
  })
  
  createApp(App)
  .use(router)
  .use(vuetify)
  .mount('#app')

这是我的app.vue

<template>
  <TheNavigation></TheNavigation>
  <div class="container">
    <router-view></router-view>
  </div>
</template>

<script setup>
import TheNavigation from './components/TheNavigation.vue';

</script>
<style scoped>
</style>

以下是我的Navigation.vue

<template>
  <v-app-bar color="primary">
    <v-toolbar-title>My App</v-toolbar-title>
    <v-toolbar-items class="hidden-sm-and-down">
      <router-link to="/" class="nav-link" :class="{ 'active-menu': $route.path === '/' }">Dashboard</router-link>
      <router-link to="/currencies" class="nav-link" :class="{ 'active-menu': $route.path === '/currencies' }">Currencies</router-link>
      <router-link to="/settings" class="nav-link" :class="{ 'active-menu': $route.path === '/settings' }">Settings</router-link>
    </v-toolbar-items>
    <v-btn icon class="hidden-md-and-up" @click="drawer = !drawer">
      <v-icon>mdi-menu</v-icon>
    </v-btn>
  </v-app-bar>
</template>

<script setup>
import { ref } from 'vue';

  const drawer = ref(false)

</script>

<style scoped>
.nav-link {
  color: blue;
  text-decoration: none;
  padding: 10px;
}

.active-menu {
  color: lightblue;
}
</style>

Answer 1

您将始终使用 v-app 作为根布局。

详情请参阅doc：

<v-app theme="light">
  <TheNavigation></TheNavigation>
  <div class="container">
    <router-view></router-view>
  </div>
</v-app>