Vue Academy · Lektion

Plugin-Architektur und app.use()

Plugin-Objekt { install(app, options) }, Zugriff auf app.component, app.directive und app.provide

Plugin-Architektur und app.use() ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Was ist ein Vue-Plugin

Ein Vue-Plugin ist wiederverwendbarer Code, der Funktionen auf App-Ebene hinzufügt — globale Komponenten, Direktiven, injizierte Services oder Konfigurationen. Beispiele sind Vue Router, Pinia und i18n-Bibliotheken.

Sie registrieren ein Plugin einmal mit app.use(plugin).

Der install-Vertrag

Ein Plugin ist entweder ein Objekt mit einer install(app, options)-Methode oder eine Funktion, die direkt als install verwendet wird. Vue ruft sie mit der App-Instanz und allen übergebenen Optionen auf.

const myPlugin = {
  install(app, options) {
    // register things on the app here
    console.log('installing with', options)
  }
}

export default myPlugin

Globale Komponenten registrieren

Verwenden Sie innerhalb von install app.component(name, definition), um eine Komponente zu registrieren, die in jeder Vorlage verfügbar ist, ohne sie importieren zu müssen.

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'

const uiKit = {
  install(app) {
    app.component('BaseButton', BaseButton)
    app.component('BaseIcon', BaseIcon)
  }
}

Globale Direktiven registrieren

Verwenden Sie app.directive(name, definition), um eine benutzerdefinierte Direktive global zu registrieren, beispielsweise v-focus oder v-tooltip.

const focusPlugin = {
  install(app) {
    app.directive('focus', {
      mounted(el) {
        el.focus()
      }
    })
  }
}

// usage in any template: <input v-focus />

Injizierbare Services bereitstellen

app.provide(key, value) stellt einen Wert bereit, den jede untergeordnete Komponente mit inject(key) auslesen kann. Dies ist die moderne Möglichkeit, Services (einen API-Client oder eine Konfiguration) ohne globale Variablen gemeinsam zu nutzen.

const apiPlugin = {
  install(app, options) {
    const client = createClient(options.baseURL)
    app.provide('api', client)
  }
}

Den bereitgestellten Service verwenden

Jede Komponente verwendet inject, um den vom Plugin bereitgestellten Wert auszulesen. Verwenden Sie aus Sicherheitsgründen bevorzugt einen typisierten Injection-Key (ein Symbol), aber auch String-Schlüssel funktionieren.

<script setup>
import { inject } from 'vue'

const api = inject('api')
async function load() {
  const data = await api.get('/users')
}
</script>

Optionen an ein Plugin übergeben

Das zweite Argument von app.use wird als Parameter options an install weitergereicht. Verwenden Sie es, um das Verhalten bei der Registrierung zu konfigurieren.

import { createApp } from 'vue'
import App from './App.vue'
import apiPlugin from './plugins/api'

const app = createApp(App)
app.use(apiPlugin, { baseURL: 'https://api.example.com' })
app.mount('#app')

Plugins werden vor mount ausgeführt

Alle Aufrufe von app.use erfolgen vor app.mount. Zum Zeitpunkt des Mountens sind alle globalen Komponenten, Direktiven und bereitgestellten Werte registriert, sodass bereits das erste Rendering auf sie zugreifen kann.

const app = createApp(App)
app.use(router)
app.use(pinia)
app.use(uiKit)
// everything is registered, now render
app.mount('#app')

Idempotente Installation

Vue verhindert, dass ein und dasselbe Plugin zweimal in einer App installiert wird — der zweite Aufruf von app.use mit einem identischen Plugin wird ignoriert. Gestalten Sie install dennoch so, dass es sicher ist, und vermeiden Sie Seiteneffekte außerhalb der App-Instanz.

app.use(myPlugin) // installs
app.use(myPlugin) // ignored, no double registration

Ein vollständiges minimales Plugin

Zusammengefasst: Ein Plugin kann in einer einzigen install-Methode eine Komponente und eine Direktive registrieren sowie einen Service bereitstellen.

import Banner from './Banner.vue'

export default {
  install(app, options = {}) {
    app.component('AppBanner', Banner)
    app.directive('focus', { mounted: (el) => el.focus() })
    app.provide('config', { theme: options.theme || 'light' })
  }
}

Plugin oder Composable

Verwenden Sie ein Plugin für eine einmalig ausgeführte, app-weite Einrichtung (globale Komponenten oder die Bereitstellung eines Singleton-Services). Verwenden Sie ein Composable für wiederverwendbare zustandsbehaftete Logik, die von einzelnen Komponenten genutzt wird. Plugins richten häufig das ein, was Composables später über inject auslesen.

Kurzer Test

Testen Sie Ihr Verständnis der Plugin-Architektur.

Zusammenfassung

Sie haben die Plugin-Architektur kennengelernt:

Ein Plugin stellt install(app, options) bereit (oder ist selbst eine Funktion)
app.component / app.directive registrieren globale Elemente
app.provide stellt injizierbare Services bereit, die über inject ausgelesen werden
app.use(plugin, options) registriert das Plugin vor mount
Die Installation ist idempotent — eine erneute Installation wird ignoriert

Häufig gestellte Fragen

Ist die Lektion „Plugin-Architektur und app.use()“ kostenlos?

Ja — der vollständige Text von „Plugin-Architektur und app.use()“ 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 „Plugin-Architektur und app.use()“?

Plugin-Objekt { install(app, options) }, Zugriff auf app.component, app.directive und app.provide 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 1 von 4.

Wie lange dauert die Lektion „Plugin-Architektur und app.use()“?

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

Plugin-Architektur und app.use()
Globale Eigenschaften und provide/inject in Plugins
Beispiel für ein Benachrichtigungs- und Toast-Plugin
Vue-Plugins veröffentlichen und typisieren

← Zurück zu Vue Academy