证明css不适用

Question

我正在学习this教程。我花了大约40分钟在他添加Vuetify的地方，我已经跟随了他，据我所知，我的代码和他的代码是一样的，但是Vuetify似乎不会加载到我这一端。

在下面的图片中，左边是我屏幕上的样子，右边是教程/应该是什么样子的。

​

下面是相关的.vue页面：

<template>
    <v-layout column>
      <v-flex xs6 offset-xs3>
        <div class="white elevation-2">
          <v-toolbar class="cyan" flat dense dark>
            <v-toolbar-title>Register</v-toolbar-title>
          </v-toolbar>
          <div class="pl-4 pr-4 pt-2 pb-2">
            <input
              type="email"
              name="email"
              v-model="email"
              placeholder="email" />
              <br>
            <input
              type="password"
              name="password"
              v-model="password"
              placeholder="password" />
              <br>
              <div class="error" v-html="error" />
              <br>
            <button
              @click="register">
              Register
            </button>
          </div>
        </div>
      </v-flex>
    </v-layout>
</template>

下面是我导入vuetify的main.js：

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import '../node_modules/vuetify/dist/vuetify.min.css'

Vue.config.productionTip = false

Vue.use(Vuetify)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

我不知道问题出在哪里。vuetify.min.css文件位于从中导入它的位置。npm说vuetify安装正确。

Answer 1

试试这个：

<template>
  <div>
    <v-app>
      <v-layout coloumn>...</v-layout>
    </v-app>
  </div>
</template>

Answer 2

将css导入行替换为所示的行。这是从官方的Vuetify文档复制的。(https://vuetifyjs.com/en/getting-started/quick-start)

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.config.productionTip = false

Vue.use(Vuetify)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})