Vue/Vuetify - 알 수 없는 사용자 지정 요소: - 구성 요소를 올바르게 등록하셨습니까?

Vue/Vuetify - 알 수 없는 사용자 지정 요소: - 구성 요소를 올바르게 등록하셨습니까?

나는 Vue와 Vuetify를 처음 본다.나는 두 가지 모두를 확인하기 위해 빠른 앱을 만들었어.그러나 나는 처음에 문제에 부딪쳤다.문서에 설명된 모든 단계를 따르더라도 vue는 부호화 구성요소를 식별하지 못한다.오류는 다음과 같다.

vue.runtime.esm.js?ff9b:587 [Vue warn]:알 수 없는 사용자 지정 요소: - 구성 요소를 올바르게 등록하셨습니까?재귀 구성 요소의 경우 "이름" 옵션을 제공하십시오.

에서 발견되다.

--> src\App에서.부에를 하다

샌드박스 https://codesandbox.io/s/40rqnl8kw에서 전체 코드에 액세스할 수 있다.

작업 순서에 문제가 있을 수 있다.너만의 것을 정의하고 있구나.App를 사용하는 구성 요소v-appVue에게 사용하라고 말하기 전에 구성 요소, 즉 Vue는 사용자가 자신의 사용자 지정을 사용한다고 가정함v-app구성 요소

장소Vue.use(Vuetify)Vue 인스턴스를 시작하기 전에new Vue()Vuetify 구성요소를 요구하거나 구성요소의 정의 바로 위에 배치하십시오.<script>단일 파일 구성 요소 내에서 Vue 및 Vuetify를 가져온 후 태그 지정.두 개 이상 가지고 있어도 걱정하지 마라.Vue.use(Vuetify)첫 번째 사람만이 어떤 일을 할 것이기 때문에, 이후의 모든 전화는 아무 것도 할 수 없을 것이다.

---

원본 -Vue.use()전에 불려지다new Vue()에러가 발생함.

new Vue({
    el: "#app",
    components: { App },
    template: "<App/>"
});

Vue.use(Vuetify);

수정 - 호출new Vue()다음에Vue.use()Vue가 종속성을 올바르게 해결하도록 허용.

Vue.use(Vuetify);

new Vue({
    el: "#app",
    components: { App },
    template: "<App/>"
});

최근 우연히 마주친 이 오류에는 또 다른 이유가 있다.

최근에 Vuetify 1.5에서 2.x로 업그레이드했으며 현재 승인된 답변에서와 같이 작업 순서를 정확하게 지정했음에도 불구하고 v-app를 알 수 없다는 오류를 계속 수신하고 있었다.

알 수 없는 사용자 지정 요소:<v-app>- 구성 요소를 올바르게 등록하셨습니까?재귀 구성 요소의 경우 "이름" 옵션을 제공하십시오.

업그레이드 프로세스를 수행하려면 패키지에 다음 항목을 추가해야 함json devDependencies 섹션은 원래 my vuetify 1.5x 패키지에 존재하지 않았던 섹션:

"vuetify-loader": "^1.3.0"

(본 문서 현재 1.3.0 현재 버전)

한번 덧붙이자면 오류가 없어졌다고 했다.

만약 당신이 구글에서 온다면, 나에게 있어 그것은 v1에서 v2로의 변화를 깨뜨리는 것이었고, 그것은 대부분의 Codepen의 예를 쓸모없게 만들었다.네비게이션 서랍이 있는 아주 간단한 Vuetify 앱을 다시 실행하기 위해 이것을 바꿔야 했다.

remove toolbar from <v-app toolbar>
replace v-toolbar with v-app-bar
replace v-app-bar-side-icon with v-app-bar-nav-icon
replace v-app-bar-title with v-toolbar
replace v-list-tile to v-list-item

replace all flat with text

어쩌면 이게 누군가에게 도움이 될지도 몰라.

(cong yu의 말을 포함함)

편집: 기본적으로 자동으로 그렇게 할 것 같다.

이전 답변:또 다른 가능한 문제는 카트가 활성화된 경우 포함할 모든 구성 요소도 지정해야 한다는 점이다.

import Vue from 'vue'
import App from './App.vue'
import Vuetify, {
  VApp, // required
  VNavigationDrawer,
  VFooter,
  VToolbar,
  VFadeTransition
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
  components: {
    VApp,
    VNavigationDrawer,
    VFooter,
    VToolbar,
    VFadeTransition
  },
  directives: {
    Ripple
  }
})

vuetify v2.x를 사용하여 다음과 같이 vuetify 플러그인을 등록하십시오.

import Vue from 'vue'

/** register vuetify plugin globally **/

import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
const vuetify= new Vuetify(opts)
/****/

new Vue({
  vuetify,
}).$mount('#app')

Vuetify v3

import { createApp } from 'vue'

import App from './App.vue'

/*****/
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify= createVuetify({
  components,
  directives,
})
/****/

const app = createApp(App)
app.use(vuetify)

app.mount('#app')

나도 같은 문제를 경험했다.그것은 브라우저의 캐시에 의해 야기되었다. 캐쉬도 반드시 지워야 한다.

공식 Vuetify 3(Alpha)을 설치한 후에도 설치 중에 생성된 표준 데모 버전에는 추가 구성 요소가 없기 때문에 이 오류가 발생할 수 있다.

    import * as components from "vuetify/components";
    import * as directives from "vuetify/directives";

    const vuetify = createVuetify({
            components,
            directives,
        });

따라서 의 작업 버전main.tsVuetify 3의 경우:

    import "vuetify/styles"; // Global CSS has to be imported
    import { createApp } from "vue";
    import { createVuetify } from "vuetify";
    import App from "./App.vue";
    import * as components from "vuetify/components";
    import * as directives from "vuetify/directives";
    
    const app = createApp(App);
    const vuetify = createVuetify({
        components,
        directives,
    });

    app.use(vuetify).mount("#app");    
    // or app.use(vuetify); app.mount("#app");

In case someone like me new working on vue and nuxt. my mistake was that 
i didnot put the s in the last.
buildModule should be 
**buildModules**
here is my 
nuxt.config.js
export default {
    buildModules:[
        "@nuxtjs/vuetify"
    ],
    module:[
        "@nuxtjs/axios"
    ],
    components:true
}

참조URL: https://stackoverflow.com/questions/50298751/vue-vuetify-unknown-custom-element-v-app-did-you-register-the-component-c