0Pricing
Vue Academy · Lektion

Vite-Ökosystem: Plugins und Tooling

unplugin-Ökosystem, vite-plugin-vue, vite-plugin-inspect und vite-bundle-visualizer

Vite-Ökosystem: Plugins und Tooling ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Das Vite-Plugin-Ökosystem

Das Pluginsystem von Vite (auf Rollups Schnittstelle sowie Vite-spezifischen Hooks aufgebaut) bildet die Grundlage für ein umfangreiches Ökosystem. Für Vue-Projekte verbessern einige Plugins die Entwicklererfahrung deutlich: Auto-Imports, automatische Komponentenregistrierung, die Untersuchung von Transformationen und die Bundle-Analyse.

unplugin-auto-import

unplugin-auto-import importiert häufig verwendete APIs (Vues ref, computed, Router-/Pinia-Helfer und Ihre eigenen Composables) automatisch, sodass Sie keine Import-Anweisungen schreiben müssen.

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts'
    })
  ]
})

Eigene Composables automatisch importieren

Verweisen Sie auf Ihr Composables-Verzeichnis, damit auch diese Funktionen global verfügbar werden. Das Plugin erzeugt eine .d.ts-Datei, sodass TypeScript und Ihr Editor sie weiterhin verstehen.

AutoImport({
  imports: ['vue'],
  dirs: ['src/composables'], // auto-import useFoo, useBar
  dts: 'src/auto-imports.d.ts'
})

// in a component, no import needed:
// const x = ref(0); const { user } = useAuth()

unplugin-vue-components

unplugin-vue-components importiert und registriert Komponenten bei Bedarf automatisch — fügen Sie <MyButton /> in ein Template ein, und das Plugin importiert die Komponente automatisch. Nicht verwendete Komponenten werden außerdem per Tree-Shaking entfernt.

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'],
      dts: 'src/components.d.ts'
    })
  ]
})

Resolver für UI-Bibliotheken

Das Komponenten-Plugin unterstützt Resolver für beliebte UI-Bibliotheken (Element Plus, Vuetify, Naive UI) und importiert deren Komponenten und Styles bei der Verwendung automatisch — eine manuelle Registrierung ist nicht erforderlich.

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

Components({
  resolvers: [ElementPlusResolver()]
})
// <el-button> now works with no import

vite-plugin-inspect

vite-plugin-inspect stellt eine Benutzeroberfläche bereit, in der Sie sehen können, wie jedes Plugin Ihren Code in der Pipeline transformiert. Das ist besonders hilfreich, um zu verstehen, warum eine Datei am Ende so aussieht, wie sie aussieht.

import Inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [Inspect()]
})
// visit http://localhost:5173/__inspect/ in dev

Die Transformationspipeline lesen

In der Inspect-Oberfläche wählen Sie ein Modul aus und gehen die Transformation jedes Plugins Schritt für Schritt durch. Sie sehen beispielsweise, wie die Vue-SFC in Render- und Script-Teil aufgeteilt wird und wie Auto-Import Code einfügt — so lassen sich fehlerhafte Plugins gezielt identifizieren.

Bundle-Visualizer

Um die Größe des Produktions-Bundles zu verstehen, verwenden Sie ein Visualizer-Plugin (z. B. rollup-plugin-visualizer). Es erzeugt nach dem Build eine interaktive Treemap mit dem Inhalt jedes Chunks.

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({ open: true, filename: 'stats.html' })
  ]
})

Erkenntnisse aus dem Visualizer nutzen

Nutzen Sie die Treemap, um übergroße Abhängigkeiten und doppelt enthaltene Pakete zu erkennen. Häufige Lösungen sind: umfangreiche Routen oder Komponenten per Lazy Loading laden, auf kleinere Bibliotheken wechseln oder manualChunks konfigurieren, um Vendor-Code aufzuteilen.

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router', 'pinia']
      }
    }
  }
}

Plugins kombinieren

Diese Plugins lassen sich gut kombinieren. Eine typische Vue-Konfiguration verwendet Auto-Imports, Komponenten, Inspect (nur in der Entwicklung) und einen Visualizer (nur beim Build) gemeinsam, um einen möglichst reibungslosen Workflow zu erzielen.

plugins: [
  vue(),
  AutoImport({ imports: ['vue', 'vue-router'] }),
  Components({ dirs: ['src/components'] }),
  Inspect(),
  visualizer({ filename: 'stats.html' })
]

Bewusster Umgang mit .d.ts-Dateien und Gitignore

Die Auto-Import- und Komponenten-Plugins erzeugen .d.ts-Dateien. Entscheiden Sie, ob Sie diese committen (dadurch kann CI die Typen ohne Build prüfen) oder per Gitignore ausschließen möchten (sie werden beim Start der Entwicklung neu erzeugt). Nehmen Sie sie in jedem Fall in die tsconfig-Includes auf.

Schnelltest

Testen Sie Ihr Verständnis des Vite-Tooling-Ökosystems.

Zusammenfassung

Sie haben das Vite-Tooling-Ökosystem kennengelernt:

  • unplugin-auto-import — importiert Vue-APIs und Composables automatisch
  • unplugin-vue-components — importiert und registriert Komponenten automatisch, mit UI-Resolvern
  • vite-plugin-inspect — zeigt, wie Plugins die einzelnen Module transformieren
  • Bundle-Visualizer — Treemap des Chunk-Inhalts als Grundlage für Optimierungen
  • Diese Plugins lassen sich zu einem reibungslosen Vue-Entwicklungs- und Build-Workflow kombinieren

Häufig gestellte Fragen

Ist die Lektion „Vite-Ökosystem: Plugins und Tooling“ kostenlos?

Ja — der vollständige Text von „Vite-Ökosystem: Plugins und Tooling“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Vite-Ökosystem: Plugins und Tooling“?

unplugin-Ökosystem, vite-plugin-vue, vite-plugin-inspect und vite-bundle-visualizer Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Vite-Ökosystem: Plugins und Tooling“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Vue Vapor Mode: Optimierung zur Compile-Zeit
  2. Vite-Ökosystem: Plugins und Tooling
  3. Vue Macros und Vorschläge aus der Community
  4. Den passenden Vue-Stack für 2025+ auswählen
← Zurück zu Vue Academy