VueJS - Как зарегистрировать пользовательские элементы,,,

Question

Я новичок в VueJS.Я создал проект с использованием шаблона vuetify / webpack-ssr, теперь я хочу создать страницу входа, однако формы не отображаются, и консоль выдает мне следующее:

[Vue warn]: Unknown custom element: <v-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[Vue warn]: Unknown custom element: <v-text-field> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[Vue warn]: Unknown custom element: <v-select> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[Vue warn]: Unknown custom element: <v-checkbox> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Я используюэти элементы в моей форме входа в систему.Другие элементы Vue отлично работают, кроме этих пунктов.Как мне зарегистрировать эти элементы?

Вот мой main.js:

import Vue from 'vue'
import {
  Vuetify,
  VApp,
  VNavigationDrawer,
  VFooter,
  VList,
  VBtn,
  VIcon,
  VGrid,
  VToolbar,
  VCard,
  transitions
} from 'vuetify'
import '../node_modules/vuetify/src/stylus/app.styl'
import App from './App.vue'
import Components from 'components/_index'

import { createStore } from 'store/index'
import { createRouter } from 'router/index'
import { sync } from 'vuex-router-sync'

Vue.use(Vuetify, {
  components: {
    VApp,
    VNavigationDrawer,
    VFooter,
    VList,
    VBtn,
    VIcon,
    VGrid,
    VToolbar,
    VCard,
    transitions
  },
  theme: {
    primary: '#ee44aa',
    secondary: '#424242',
    accent: '#82B1FF',
    error: '#FF5252',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FFC107'
  }
})

Большое спасибо.

Answer 1

Вы не импортировали и не определили компоненты, которые используете, и поэтому они отображаются как предупреждение.

Отредактируйте код, как показано ниже, и все должно работать нормально.

 import Vue from 'vue'
    import {
      Vuetify,
      VApp,
      VForm,
      VTextField,
      VSelect,
      VCheckbox,
      VNavigationDrawer,
      VFooter,
      VList,
      VBtn,
      VIcon,
      VGrid,
      VToolbar,
      VCard,
      transitions
    } from 'vuetify'
    import '../node_modules/vuetify/src/stylus/app.styl'
    import App from './App.vue'
    import Components from 'components/_index'

    import { createStore } from 'store/index'
    import { createRouter } from 'router/index'
    import { sync } from 'vuex-router-sync'

    Vue.use(Vuetify, {
      components: {
        VApp,
        VForm,
        VTextField,
        VSelect,
        VCheckbox,
        VNavigationDrawer,
        VFooter,
        VList,
        VBtn,
        VIcon,
        VGrid,
        VToolbar,
        VCard,
        transitions
      },
      theme: {
        primary: '#ee44aa',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107'
      }
    })