Vuetify 样式标签未出现在我的网页中

Question

我正在使用 Vuetify 并尝试制作网页，但未出现 Vuetify 组件样式。你能指导我吗。谢谢。

下面是我的代码。

<template>
  <v-app>
    <v-navigation-drawer v-model="sidebar" app>
      <v-list>
        <v-list-tile v-for="item in menuItems" :key="item.title" :to="item.path" @click>
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>{{ item.title }}</v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar color="indigo" dark fixed app>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>
        <router-link to="/" tag="span" style="cursor: pointer">{{ appTitle }}</router-link>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-xs-only">
        <v-btn flat v-for="item in menuItems" :key="item.title" :to="item.path">
          <v-icon left dark>{{ item.icon }}</v-icon>
          {{ item.title }}
        </v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <v-content>
      <router-view/>
    </v-content>
  </v-app>
</template>
<script>
import Vue from 'vue';
import Vuetify from 'vuetify';
import router from '@/router';
Vue.use(Vuetify);

export default {
  data() {
    return {
      appTitle: 'MyEvents',
      sidebar: false,
      drawer: null,
      menuItems: [
        { title: 'Home', path: '/home', icon: 'home' },
        { title: 'Sign Up', path: '/signup', icon: 'home' },
        { title: 'Sign In', path: '/signin', icon: 'home' }
      ]
    };
  }
};
</script>
<style>

预期的页面显示如下。

但按照代码页面显示如下。

这里我的侧边导航显示不正确。

Answer 1

您在项目中使用 vue-cli 吗？ 如果是这样，你必须通过 vue ui 安装插件 vue-cli-plugin-vuetify。

这里是链接：https://vuetifyjs.com/en/getting-started/quick-start

您好！