comment éviter l'importation en double et les déclarations de composants dans VueJS

Question

J'utilise Quasar et le kit de démarrage PWA, avec VueJS.

Je veux savoir comment déclarer une fois un ensemble de composants utilisés sur de nombreuses pages dans une application Vue.

Je semblent avoir besoin d'avoir une énorme déclaration d'importation dans chaque page

J'ai essayé d'importer une fois dans main.js mais il y a un

conflit

import Quasar from 'quasar' 

je ne peux pas ajouter à cela ou le changement il à

import { 
    Quasar, 
    QCard, 
    .... etc 
} from 'quasar' 

comme le {} semble briser l'importation. Impossible également d'importer deux fois (erreur duplicate import).

Quel est le moyen d'importer des composants une seule fois pour l'ensemble d'une application? Ou obtenir l'objet Vue afin qu'il puisse être utilisé d'une autre manière pour importer dans un autre composant?

Answer 1

Vous pouvez importer des composants spécifiques à enregistrer globalement dans le fichier main.js lorsque vous enregistrez le plug-in Quasar.

Par exemple, vous voulez être en mesure d'utiliser les composants <q-btn> et <q-icon> partout dans votre application, vous pouvez le faire:

import Quasar, { QBtn, QIcon } from 'quasar' 

Vue.use(Quasar, { 
    components: { QBtn, QIcon } 
}) 

Here's the documentation.