Plugin-System: app.use()
Erstellen Sie ein Vue-Plugin als Objekt mit einer install-Methode, registrieren Sie globale Komponenten und Direktiven und stellen Sie Werte für die gesamte Anwendung bereit.
Plugin-System: app.use() ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist ein Vue-Plugin?
Ein Plugin ist wiederverwendbare Funktionalität, die Sie in einer Vue-App installieren: globale Komponenten, Direktiven, bereitgestellte Werte und Hilfsfunktionen nach dem Prototyp-Muster (Router, i18n, Pinia). Über Plugins integrieren sich Bibliotheken in Vue.
Aufbau eines Plugins
Ein Plugin ist ein Objekt mit einer install(app, options)-Methode – oder eine Funktion, die als Installationsmethode fungiert.
// MyPlugin.ts
export default {
install(app, options) {
// Configure things here
}
};Ein Plugin installieren
Rufen Sie app.use(plugin, options) auf der Vue-App-Instanz auf.
import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './plugins/MyPlugin';
const app = createApp(App);
app.use(MyPlugin, { theme: 'dark' });
app.mount('#app');Plugin-Anwendungsfall: Globale Komponenten
Registrieren Sie viele kleine Komponenten global, damit Benutzer nicht jede einzelne importieren müssen.
// plugins/iconPack.ts
import IconChevron from './IconChevron.vue';
import IconClose from './IconClose.vue';
import IconUser from './IconUser.vue';
export default {
install(app) {
app.component('IconChevron', IconChevron);
app.component('IconClose', IconClose);
app.component('IconUser', IconUser);
}
};
// main.ts
app.use(iconPack);Plugin-Anwendungsfall: Globale Direktiven
Registrieren Sie benutzerdefinierte Direktiven einmal, sodass sie in der gesamten App verfügbar sind.
export default {
install(app) {
app.directive('focus', { mounted: (el) => el.focus() });
app.directive('click-outside', clickOutsideDirective);
}
};Plugin-Anwendungsfall: provide()
Stellen Sie app-weite Werte bereit, die jede Komponente injizieren kann – üblich für API-Clients und Konfigurationen.
import type { InjectionKey } from 'vue';
import { ApiClient } from './ApiClient';
export const ApiKey: InjectionKey<ApiClient> = Symbol('api');
export default {
install(app, { baseURL }) {
const api = new ApiClient({ baseURL });
app.provide(ApiKey, api);
}
};
// Anywhere:
const api = inject(ApiKey)!;Praxisbeispiele für Plugins: Pinia, Vue Router, i18n
Die wichtigsten Bibliotheken des Vue-Ökosystems sind Plugins.
import { createPinia } from 'pinia';
import router from './router';
import { createI18n } from 'vue-i18n';
const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(createI18n({ /* ... */ }));Plugin-Optionen
Plugins akzeptieren Optionen, mit denen Sie ihr Verhalten zum Zeitpunkt der Installation konfigurieren.
app.use(MyPlugin, {
apiUrl: 'https://api.example.com',
enableLogs: true,
theme: 'dark'
});
// Inside the plugin:
install(app, options) {
if (options.enableLogs) console.log('plugin installed');
}Erweiterung von TypeScript-Typen
Erweitern Sie für globalProperties oder Injection-Hilfsfunktionen die Vue-Typen, damit Benutzer Autovervollständigung erhalten.
// types.d.ts
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$api: ApiClient;
}
}
// In plugin:
install(app) {
app.config.globalProperties.$api = new ApiClient();
}globalProperties — Altes Muster
app.config.globalProperties.$foo stellt einen Wert als this.$foo in Options-API-Komponenten und Templates bereit. Die Composition API bevorzugt inject().
Idempotente Installation
Die Anwendung darf nicht abstürzen, wenn das Plugin zweimal installiert wird – prüfen Sie ein Flag oder verwenden Sie auf Symbolen basierende Provide-Schlüssel, die Duplikate automatisch vermeiden.
Eigenes Plugin schreiben
Wenn mehrere Apps dieselbe Konfiguration wiederverwenden (Auth-Wrapper, Telemetrie-Setup, Design-Tokens), bündeln Sie sie als Plugin. Die Veröffentlichung auf npm mit einer klaren install(app, options)-Signatur ist der Vue-typische Weg, wiederverwendbare Funktionalität bereitzustellen.
Kurze Überprüfung
Welche Methode rufen Sie auf einer Vue-App-Instanz auf, um ein Plugin zu installieren?
Zusammenfassung: Vue-Plugins
Plugin = Objekt mit install(app, options). Installation über app.use(plugin, options). Verwenden Sie Plugins, um globale Komponenten und Direktiven zu registrieren, Werte bereitzustellen und Bibliotheken zu konfigurieren. Pinia, Vue Router und i18n sind allesamt Plugins. Erweitern Sie ComponentCustomProperties für Eigenschaften mit $-Präfix. Sorgen Sie dafür, dass install idempotent ist.
Häufig gestellte Fragen
Ist die Lektion „Plugin-System: app.use()“ kostenlos?
Ja — der vollständige Text von „Plugin-System: 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 Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Plugin-System: app.use()“?
Erstellen Sie ein Vue-Plugin als Objekt mit einer install-Methode, registrieren Sie globale Komponenten und Direktiven und stellen Sie Werte für die gesamte Anwendung bereit. Du übst Frontend 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 Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend 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 4 von 4.
Wie lange dauert die Lektion „Plugin-System: 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 Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend 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
- provide() und inject() für Abhängigkeitsinjektion
- Asynchrone Komponenten und Suspense
- Benutzerdefinierte Direktiven
- Plugin-System: app.use()