Vuetify css не применяется - PullRequest
Новая
       5

Vuetify css не применяется

1 голос
/ 01 марта 2020

Я работаю через этот учебник. У меня около 40 минут, когда он добавляет Vuetify, и я следил за ним, и мой код такой же, как его, насколько я могу судить, однако кажется, что Vuetify не будет загружаться с моей стороны.

In На следующем рисунке слева показано, как оно выглядит на моем экране, а справа - учебное пособие / как оно должно выглядеть. enter image description here

Здесь уместно. 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>

Вот основной. js, куда я импортировал vuetify: 

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 установлен правильно.

Ответы [ 2 ]

0 голосов
/ 13 апреля 2020

Попробуйте это: 

<template>
  <div>
    <v-app>
      <v-layout coloumn>...</v-layout>
    </v-app>
  </div>
</template>
0 голосов
/ 02 марта 2020

Замените строку импорта 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/>'
})
...