Soy nuevo en Vue y Vuetify. Acabo de crear la aplicación rápida para comprobar tanto de ellos. Pero yo soy un ejecutando en problemas en principio. La vue no se puede identificar vuetify componentes a pesar de seguir todos los pasos descritos en el documento. El error es como a continuación –

vue.en tiempo de ejecución.esm.js?ff9b:587 [Vue advertir]: Desconocido elemento personalizado:
– ¿usted se registra el componente correctamente? Para recursiva
los componentes, asegúrese de proporcionar el «nombre» de la opción.

encuentra en

—> src\App.vue

Puedes acceder a todo el código en el entorno limitado de la https://codesandbox.io/s/40rqnl8kw

InformationsquelleAutor indusBull | 2018-05-11

2 Comentarios

  1. 13

    Usted, es probable que tenga un problema con el orden de las operaciones. Por ejemplo, está definiendo su propio App componente que utiliza el v-app componente incluso antes de que hayas dicho Vue para hacer uso de ella, por lo que Vue asume que usted está utilizando su propio personalizado v-app componente.

    Lugar Vue.use(Vuetify) antes de comenzar cualquier Vue instancias (a través de new Vue() que requieren Vuetify componentes, o colocarla dentro del componente de definiciones de sí mismos a la derecha en la parte superior de la <script> de la etiqueta después de la importación de Vue y Vuetify dentro de un único archivo de componente. No se preocupe si usted tiene más de un Vue.use(Vuetify) declaración debido a que el primero va a hacer nada-todas las llamadas posteriores simplemente no hacer nada.

    He aquí un ejemplo de una corrección en el funcionamiento de la orden: https://codesandbox.io/s/m9jpw517op


    Por el bien de proporcionar el fragmento de código en caso de que el enlace que se rompe en el futuro:

    OriginalVue.use() se llama antes de que new Vue(), lo que resulta en un error.

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

    Revisión – Llamar new Vue() después de Vue.use() permite Vue para resolver la dependencia correctamente.

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

    Edición: Esta respuesta ha sido modificado después de ser aceptado en el fin de corregir un error que podría inducir a error a los lectores futuros, minimizar los cambios en el código de ejemplo para simplificar, y evitar que la solución en cuestión se vuelven inaccesibles si el codesandbox sitio web no está disponible.

    • ty!.. esta revisión soluciona el problema. Me pregunto cómo se puede hacer Vue.uso(Vuetify) incluso antes de la importación Vuetify en main.js
    • Después de tomar un vistazo más de cerca, usted puede dejar la mayor parte de su main.js código como era. Solo tiene que mover el Vue.use() antes de su new Vue(). El problema es que una vez que se crea la Vue ejemplo, es demasiado tarde para hacer Vue.use() decir Vue utilizar Vuetify. El orden de las operaciones es muy importante en la programación! Aquí una actualización ejemplo: codesandbox.io/s/o5jxzr4xvz
    • De hecho, fíjate en esto: es totalmente puede hacer Vue.use(Vuetify) antes de la importación! Lo que importa es que el uso de Vue.use(Vuetify) antes de hacer new Vue() en cualquier Vue instancias que utilizan Vuetify componentes! codesandbox.io/s/o5jxzr4xvz
    • Juro que he jugado con el fin de. Puede que b debería haber pensado acerca de ello, lógicamente. Gracias por la aclaración.
  2. 0

    Otro posible problema es que si tienes a la carta habilitado deberá también especificar todos los componentes que desea incluye:

    Edit: parece VuetifyLoader se automatcially hacer eso para usted

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

Dejar respuesta

Please enter your comment!
Please enter your name here