vue cli plugin import components

Vue-Cli-Plugin-IMPORT-COMPONNANTS

Importez automatiquement des composants dans votre application Vue CLI avec tremblement d'arbre, prenant en charge les Vue 2 et 3.

Pourquoi et comment?

Découvrez mon article sur les raisons pour lesquelles cette fonctionnalité existe, comment elle fonctionne et les problèmes.

Besoin de quelque chose de plus puissant? Envisagez d'utiliser des composants unplugin-vue

Caractéristiques

• ? Vue 2 et 3 Support avec des tremblements d'arbres pleins
• ⚡ Chargez paresseux vos composants
• Module chaud rechargement prêt
• ? Écrit en dactylographie

Installation

Installez à l'aide de Vue CLI. (Vue CLI 4+ est recommandé)

vue add import-components

---

Usage

Ajoutez des composants à vos components/ dossier.

 | components/
--- | ComponentFoo.vue
--- | ComponentBar.vue

Utilisez-les dans n'importe quel .vue comme vous le feriez normalement. Accédez à vos composants avec Pascalcase ou Kebab-Case.

 < template >
< div >
  < ComponentFoo />
  < component-bar />
</ div >
</ template >

Supprimez imports et components de la section script .

Chargement des composants asynchrones

Vous pouvez charger vos composants asynchronisés en préfixant le nom de votre composant avec Lazy ou lazy- , selon votre syntaxe.

 < template >
< div >
  <!-- ComponentFoo will be loaded in async -->
  < LazyComponentFoo />
  <!-- ComponentBar will be loaded sync -->
  < ComponentBar />
</ div >
</ template > 

Configuration

Vous pouvez modifier le comportement du plugin en modifiant les options dans ./vue.config.js .

 // vue.config.js
module . exports = {
  pluginOptions : {
    components : {
      ...
    }
  }
}

Options

Toutes les options sont facultatives.

chemin - chaîne

Le chemin utilisé pour la numérisation pour trouver des composants. Remarque: il doit être relatif à la racine de votre projet.

Par défaut: ./src/components

motif - chaîne

Regex pour trouver les fichiers dans le path . Remarque: si vous omettez le modèle, il utilisera les extensions configurées

Par défaut: **/*.{${extensions.join(',')},}

ignorer - string []

Regex pour ignorer les fichiers dans le path .

Par défaut: [ '**/*.stories.js' ],

MapComponent - (composant: composant) => Composant | FAUX

Une fonction que vous pouvez utiliser pour filtrer les chemins que vous ne souhaitez pas être scannés.

Par exemple, si nous voulions accéder à vos composants automatiquement uniquement lorsqu'ils les ont préfixés avec auto , vous pouvez utiliser le code ci-dessous.

 // vue.config.js
module . exports = {
  pluginOptions : {
    components : {
      // prefix all automatically imported components with an auto prefix
      mapComponent ( component ) {
        component . pascalCase = 'Auto' + upperFirst ( component . pascalCase )
        component . kebabName = 'auto-' + component . pascalCase
        return component
      }
    }
  }
} 

Extensions - String []

Lors de la numérisation du chemin des composants, quels fichiers doivent être considérés comme des composants.

Par défaut: ['.js', '.vue', '.ts']

Limites

Importations statiques uniquement

Seuls les composants qui sont définis statiquement dans votre modèle fonctionneront.

< template >
  < component :is = " dynamicComponent " />
</ template >

Utilisation de dossiers comme espaces de noms

On suppose que vous utilisez les conventions Vue pour nommer vos composants. Ce qui précède ne fonctionnerait pas sans cartographier manuellement les composants.

 | components/
--- | Foo.vue
------ | Namespace/Foo.vue

Cela créerait un conflit avec deux composants appelés Foo.vue . Vous devez nommer vos fichiers de composants avec l'espace de noms. IE NamespaceFoo.vue .

Composants javascript

Vous devrez peut-être actualiser votre navigateur lorsque vous les mettez à jour. Le rechargement du module chaud semble parfois un peu buggy.

Il est recommandé de vous en tenir aux composants .vue SFC.

Licence

Mit