[Vue warn] :알 수 없는 사용자 지정 요소: ..." vuetify UI 구성 요소를 vue-cli-plugin-vuetify와 함께 사용하는 경우 오류 발생

[Vue warn] :알 수 없는 사용자 지정 요소: ..." vuetify UI 구성 요소를 vue-cli-plugin-vuetify와 함께 사용하는 경우 오류 발생

프로젝트 설정에서 vue-cli-plugin-vuetify와 함께 vue-cli를 사용하고 있습니다.List Components 중 하나를 사용하는 경우 브라우저 콘솔은 대부분의 Vuetify 요소에 다음과 같은 오류를 발생시킵니다.

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

제 생각엔 파일에 추가 설정을 해야 할 것 같습니다./plugins/vuetify.js어떻게 해야 할지 모르겠어요

내 파일vuetify.js다음과 같습니다.

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'md',
})

main.js:

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

질문:vuetify의 모든 컴포넌트를 작동시키려면 어떻게 해야 합니까?

도와주셔서 감사합니다!

편집:

기본적으로, 제가 한 일은 새로운 프로젝트를 만드는 것이었습니다.vue create projectX그리고 나서 vuetify를 추가했다.vue add vuetify이제 vuetify 문서의 예를 사용할 수 있게 되었습니다.다만, 예를 카피앤페이스트 하면, 에러가 발생합니다.

해라import Vuetify from 'vuetify'대신import Vuetify from 'vuetify/lib'

모든 vuetify 컴포넌트를 Import하여 신고 없이 사용할 수 있습니다.

또는 A-La-Carte 모드를 계속 사용하고 싶은 경우는, 다음의 것을 사용해 주세요.

import Vue from 'vue'
import Vuetify, {
  VCard,
  VRating,
  VToolbar,
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
  components: {
    VCard,
    VRating,
    VToolbar,
  },

여기서 VCard, VRating 등은 단순한 예입니다.

vuetify 업데이트 방법:npm install -S vuetify@2.0.1

Vuetify 2.x를 사용하는 경우 Vuetify 개체를 다음 위치에서 내보내야 합니다.vuetify.js

vuetify.discloss를 표시합니다.

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    dark: false // From 2.0 You have to select the theme dark or light here
  },
  icons: {
    iconfont: 'mdi', // default - only for display purposes
  }
})

Import하여 main.disc에서 사용합니다.

main.discloss.main.discloss.

import Vue from 'vue'
import vuetify from './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  vuetify,
  router,
  store,
  render: h => h(App)
}).$mount('#app'

이것으로 나는 이 문제를 해결했다.https://vuetifyjs.com/en/getting-started/unit-testing/ #docs-efficiency의 문서에서는 인스턴스를 생성하여 마운트에 전달할 것을 권장합니다.

beforeEach(() => {
  vuetify = new Vuetify()
})

const wrapper = mount(CustomCard, {
  localVue,
  vuetify
})

언급URL : https://stackoverflow.com/questions/57216190/vue-warn-unknown-custom-element-error-when-using-vuetify-ui-component