时间戳

首页 > 解决方案 > VueJS - 如何注册自定义元素,,,

javascript - VueJS - 如何注册自定义元素,,,

问题描述

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

非常感谢你。

标签： javascriptvuejs2

解决方案

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

如下编辑您的代码，一切都应该正常工作。

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

推荐阅读