Vue Academy · Lektion

Udvikling af plugins

Opret Vue-plugins, der kan installeres.

Lektion 2 af 313 trin

Udvikling af plugins er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 2 af 3. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 3 lektioner i alt.

Hvad er et plugin?

Et Vue-plugin samler funktionalitet på appniveau, som du kan installere med ét kald: globale komponenter, direktiver, egenskaber eller integrationer fra tredjeparter. Plugins er den måde, biblioteker som Vue Router og Pinia kobles til din app på.

Funktionen install

Et plugin er et objekt med en install-metode (eller blot en funktion). Vue kalder den med app-instansen og de valgmuligheder, du sender med.

export const myPlugin = {
  install(app, options) {
    // set up global features here
  }
}

Installation af et plugin

Registrér et plugin med app.use, eventuelt med et indstillingsobjekt. Vue kører installationsfunktionen én gang.

import { createApp } from "vue"
import { myPlugin } from "./myPlugin"

const app = createApp(App)
app.use(myPlugin, { greeting: "Hi" })

Registrering af globale komponenter

I installationsfunktionen registrerer du komponenter globalt, så alle dele af appen kan bruge dem uden at importere dem.

import BaseButton from "./BaseButton.vue"

export const uiKit = {
  install(app) {
    app.component("BaseButton", BaseButton)
  }
}

Registrering af globale direktiver

Et plugin kan også registrere direktiver globalt og samle relateret DOM-adfærd i én pakke, der kan installeres.

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

Tilføjelse af globale egenskaber

Brug app.config.globalProperties til at tilføje en egenskab, der er tilgængelig på enhver komponentinstans, hvilket er praktisk til hjælpeværktøjer som en formateringsfunktion eller en HTTP-klient.

export const apiPlugin = {
  install(app, options) {
    app.config.globalProperties.$api = options.client
  }
}

// in any component: this.$api.get("/users")

Brug af provide til Composition API

For at gøre pluginet velegnet til Composition API skal du bruge app.provide i dit plugin, så komponenter kan inject-indsætte værdien i setup.

export const themePlugin = {
  install(app, options) {
    app.provide("theme", options.theme)
  }
}

// in setup: const theme = inject("theme")

Videregivelse af indstillinger

Argumentet med indstillinger giver brugerne mulighed for at konfigurere dit plugin. Læs det i install for at tilpasse funktionaliteten.

export const greeter = {
  install(app, options = {}) {
    const word = options.greeting || "Hello"
    app.config.globalProperties.$greet = (name) => word + ", " + name
  }
}

Et funktionsplugin

Et plugin kan være en almindelig funktion i stedet for et objekt med install; Vue behandler selve funktionen som installationsfunktionen.

export function simplePlugin(app, options) {
  app.config.globalProperties.$version = "1.0.0"
}

app.use(simplePlugin)

Et komplet plugineksempel

Et rigtigt plugin kombinerer ofte flere af disse funktioner: registrering af en komponent, et direktiv og en global egenskab i én install-funktion.

export const toolkit = {
  install(app, options) {
    app.component("BaseButton", BaseButton)
    app.directive("focus", focusDirective)
    app.config.globalProperties.$format = options.formatter
  }
}

Hvornår skal du bygge et plugin

Vælg et plugin, når funktionaliteten virkelig skal bruges i hele appen: et UI-kit, et HTTP-lag, internationalisering eller analyse. Til logik, der kun hører til en bestemt funktion, er en composable som regel det bedre og lettere valg.

Hurtigt tjek

Test din viden om plugins.

Besvar den i den interaktive lektion

Opsummering

Et plugin eksponerer en install(app, options)-funktion og registreres med app.use. I install kan du registrere globale komponenter og direktiver, tilføje globale egenskaber via config.globalProperties og provide-indsætte værdier til injektion. Brug plugins til funktioner, der gælder for hele appen, og composables til lokal logik. Næste gang skal du strukturere et skalerbart projekt.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 42
Lektioner: 156

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Udvikling af plugins” gratis?

Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Udvikling af plugins”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 3 lektioner i alt.

Hvad lærer jeg i “Udvikling af plugins”?

Opret Vue-plugins, der kan installeres. Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Vue Academy?

Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 3.

Hvor lang tid tager lektionen “Udvikling af plugins”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Vue Academy-lektion?

Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Vue Academy