Vue/Vuetify - Unknown-custom-element: <v-app - > - registrieren Sie die Komponente korrekt?

Ich bin neu in Vue und Vuetify. Ich habe gerade erstellt schnelle app um zu überprüfen, beide von Ihnen. Aber ich bin ein in Probleme laufen zu beginnen. Der Verein schlägt fehl, zu erkennen vuetify Komponenten, obwohl Sie alle Schritte im Dokument. Die Fehlermeldung ist wie unten -

vue.- Laufzeit.esm.js?ff9b:587 [Vue warnt]: Unknown-custom-element:
- registrieren Sie die Komponente korrekt? Für die rekursive
Komponenten, stellen Sie sicher, dass der "name" - option.

gefunden in

---> im src\App.vue

Können Sie Zugriff auf den gesamten code an der sandbox https://codesandbox.io/s/40rqnl8kw

InformationsquelleAutor indusBull | 2018-05-11

  1. 11

    Sind Sie wahrscheinlich ein problem mit der Reihenfolge der Operationen. Zum Beispiel, sind Sie der Definition Ihrer eigenen App Komponente, die mit der v-app Komponente, bevor Sie haben sogar gesagt, Vue, es zu nutzen, so Vue vorausgesetzt, Sie sind mit Ihrem eigenen v-app Komponente.

    Ort Vue.use(Vuetify) vor Beginn der Vue-Instanzen (über new Vue() erfordern Vuetify Komponenten, oder innerhalb der Komponenten-Definitionen, die sich rechts oben auf der <script> tag nach dem Import Vue und Vuetify innerhalb der einzelnen Datei-Komponente. Keine Sorge, wenn Sie mehr als eine Vue.use(Vuetify) Aussage, weil nur die erste wird alles tun--alle nachfolgenden Anrufe werden einfach gar nichts tun.

    Hier ist ein Beispiel für einen fix im Betrieb um: https://codesandbox.io/s/m9jpw517op

    Zuliebe bietet das code-snippet hier bei dem link brechen in die Zukunft:

    Original - Vue.use() aufgerufen wird, bevor new Vue(), wodurch ein Fehler.

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

Vue.use(Vuetify);

    Fix - Aufruf new Vue() nach Vue.use() ermöglicht Vue zu lösen, die Abhängigkeit korrekt.

    Vue.use(Vuetify);

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

    Edit: Diese Antwort wurde geändert, nach der angenommen wird, um zu beheben, eine Ungenauigkeit, könnten zukünftige Leser, minimieren von änderungen im code-Beispiel für Einfachheit und vermeiden, dass das Update in Frage unzugänglich werden, wenn die codesandbox website nicht mehr verfügbar ist.

    ty!.. dieses Problem behebt. Ich Frage mich nur, wie können Sie das tun Vue.verwenden(Vuetify) sogar vor dem importieren in Vuetify main.js
    Nach der Einnahme eines genaueren Blick, können Sie lassen Sie die meisten Ihrer main.js code, wie es war. Bewegen Sie einfach die Vue.use() vor Ihrer new Vue(). Das problem ist, dass, sobald Sie Ihre erstellen die Vue Instanz, es ist zu spät zu tun Vue.use() zu sagen, Vue verwenden Vuetify. Reihenfolge der Operationen ist sehr wichtig in der Programmierung! Hier ist ein aktualisiertes Beispiel: codesandbox.io/s/o5jxzr4xvz
    In der Tat, check this out: Sie können völlig tun Vue.use(Vuetify) vor dem import! Was zählt, ist, dass Sie Vue.use(Vuetify) vor new Vue() auf jedem Vue-Instanzen aus, die Vuetify Komponenten! codesandbox.io/s/o5jxzr4xvz
    Ich schwöre, ich spielte mit um. Kann b ich hätte gedacht das es logisch. Danke für die Klarstellung.

    InformationsquelleAutor B. Fleming

  2. 0

    ein Weiteres mögliches problem ist, wenn Sie haben, a-la-carte aktiviert, müssen Sie auch festlegen, dass alle Komponenten, die Sie enthalten:

    Edit: sieht aus wie VuetifyLoader wird automatcially tun, dass für Sie

    https://vuetifyjs.com/en/framework/a-la-carte

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

    InformationsquelleAutor Zaptree

Schreibe einen Kommentar