Javascript VueJS-如何注册自定义元素<；v形>&书信电报；v-checkbox>&书信电报；v-select>&书信电报；v-text-field>；

我是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.

---

非常感谢。

您尚未导入和定义您正在使用的组件，因此它们显示为警告

按如下所示编辑代码，一切正常

 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'
      }
    })

---

只需从Vuetify导入元素，如从“Vuetify”导入{VForm}并将它们放在

Vue.use（Vuetify，{components:{VForm}}）

@DakshMiglani我不知道你能做到这一点，我读过类似的问题，没有一个回答像这样具体，非常感谢你：Dnp，每当你有问题时，请继续问关于堆栈溢出的问题。有人会一直在那里帮助您解决特定的用例！这对我来说是一个巨大的帮助：d再次感谢！这比我所做的（导入每个元素）XD要好得多。我真是个笨蛋。谢谢@ridhi把我的评论变成了一个很好的答案。我要投票！

 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'
      }
    })