vue cli plugin import components

Vue-Cli-Plugin-Import-Komponenten

Importieren Sie Komponenten automatisch in Ihre Vue -Cli -App mit Baumschütteln und unterstützen Sie Vue 2 und 3.

Warum und wie?

Schauen Sie in meinem Artikel darüber, warum diese Funktion existiert, wie sie funktioniert und die Probleme.

Benötigen Sie etwas Mächtigeres? Erwägen Sie die Verwendung von Unpugin-Wege-Komponenten

Merkmale

• ? Vue 2 und 3 Stütze mit voller Baumschütteln
• ⚡ LAZY LADEN SIE Ihre Komponenten
• Heißes Modul Nachladen bereit
• ? Geschrieben in TypeScript

Aufstellen

Installieren Sie mit Vue CLI. (Vue Cli 4+ wird empfohlen)

vue add import-components

---

Verwendung

Fügen Sie Ihren components/ Ordner Komponenten hinzu.

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

Verwenden Sie sie in jedem .vue wie Sie es normalerweise tun würden. Greifen Sie mit Pascalcase oder Kebab-Case auf Ihre Komponenten zu.

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

Entfernen Sie imports und components aus dem script .

Lade der Asynchronisierungskomponente

Sie können Ihre Komponenten Async laden, indem Sie Ihren Komponentennamen je nach Syntax mit Lazy oder lazy- werden.

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

Konfiguration

Sie können das Verhalten des Plugins ändern, indem Sie die Optionen in ./vue.config.js ändern.

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

Optionen

Alle Optionen sind optional.

Pfad - String

Der Pfad, der zum Scannen verwendet wird, um Komponenten zu finden. Hinweis: Es sollte relativ zu Ihrer Projektwurzel sein.

Standard: ./src/components

Muster - Zeichenfolge

Regex, um die Dateien im path zu finden. Hinweis: Wenn Sie das Muster weglassen, wird die konfigurierten extensions verwendet

Standard: **/*.{${extensions.join(',')},}

ignorieren - String []

Regex ignorieren Dateien im path .

Standard: [ '**/*.stories.js' ],

mapComponent - (Komponente: Komponente) => Komponente | FALSCH

Eine Funktion, mit der Sie Pfade herausfiltern können, die Sie nicht gescannt werden möchten.

Wenn wir beispielsweise nur dann auf Ihre automatischen Komponenten zugreifen möchten, wenn sie sie mit auto vorangestellt haben, können Sie den folgenden Code verwenden.

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

Erweiterungen - String []

Wenn Sie den Pfad für Komponenten scannen, sollten die Dateien als Komponenten betrachtet werden.

Standard: ['.js', '.vue', '.ts']

Einschränkungen

Nur statische Importe

Nur Komponenten, die in Ihrer Vorlage statisch definiert sind, funktionieren.

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

Verwenden von Ordnern als Namespaces

Es wird angenommen, dass Sie die Vue -Konventionen für die Benennung Ihrer Komponenten verwenden. Das folgende würde nicht funktionieren, ohne die Komponenten manuell zu kartieren.

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

Es würde einen Konflikt mit zwei Komponenten namens Foo.vue erzeugen. Sie sollten Ihre Komponentendateien mit dem Namespace benennen. NamespaceFoo.vue .

JavaScript -Komponenten

Möglicherweise müssen Sie Ihren Browser aktualisieren, wenn Sie ihn aktualisieren. Das heiße Modul Nachladen scheint manchmal etwas fehlerhaft zu sein.

Es wird empfohlen, dass Sie sich an .vue -SFC -Komponenten halten.

Lizenz

MIT