programing

VueJS - 커스텀 요소 등록 방법 , , ,

goodcopy 2022. 11. 27. 21:31
반응형

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 요소는 완벽하게 작동합니다.이러한 요소를 등록하려면 어떻게 해야 합니까?

이게 제 메인입니다.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'
  }
})

정말 감사합니다.

사용 중인 구성 요소를 가져오고 정의하지 않았으므로 경고로 표시됩니다.

아래와 같이 코드를 편집하면 모든 것이 정상적으로 동작합니다.

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

언급URL : https://stackoverflow.com/questions/54800912/vuejs-how-to-register-custom-elements-v-form-v-checkbox-v-select-v-t

반응형