Vue Academy · Lektion

Utveckling av pluginer

Skapa installerbara Vue-pluginer.

Lektion 2 av 313 steg

Utveckling av pluginer är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 2 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 3 lektioner.

Vad är ett plugin?

Ett Vue-plugin paketerar funktionalitet på appnivå som du kan installera med ett enda anrop: globala komponenter, direktiv, egenskaper eller tredjepartsintegrationer. Pluginer är sättet som bibliotek som Vue Router och Pinia kopplas in i din app.

Funktionen install

Ett plugin är ett objekt med en install-metod (eller helt enkelt en funktion). Vue anropar den med appinstansen och eventuella alternativ som du skickar med.

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

Installera ett plugin

Registrera ett plugin med app.use och skicka eventuellt med ett options-objekt. Vue kör installationsfunktionen en gång.

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

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

Registrera globala komponenter

I install-funktionen registrerar du komponenter globalt, så att alla delar av appen kan använda dem utan importer.

import BaseButton from "./BaseButton.vue"

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

Registrera globala direktiv

Ett plugin kan också registrera direktiv globalt och samla relaterade DOM-beteenden i ett enda installerbart paket.

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

Tillhandahålla globala egenskaper

Använd app.config.globalProperties för att lägga till en egenskap som är tillgänglig på varje komponentinstans. Det är praktiskt för verktyg som en formatterare eller en HTTP-klient.

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

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

Använda provide med Composition API

För att göra pluginet kompatibelt med Composition API använder du app.provide i ditt plugin, så att komponenter kan inject värdet i setup.

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

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

Skicka alternativ

Argumentet options låter användare konfigurera ditt plugin. Läs det i install för att anpassa beteendet.

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

Ett plugin som funktion

Ett plugin kan vara en vanlig funktion i stället för ett objekt med install; Vue behandlar själva funktionen som installerare.

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

app.use(simplePlugin)

Ett komplett pluginexempel

Ett verkligt plugin kombinerar ofta flera av dessa: registrering av en komponent, ett direktiv och en global egenskap i en och samma install-funktion.

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

När du bör bygga ett plugin

Använd ett plugin när funktionaliteten verkligen ska gälla hela appen: ett UI-kit, ett HTTP-lager, i18n eller analys. För logik som hör till en viss funktion är en composable vanligtvis det bättre och enklare valet.

Snabbtest

Testa dina kunskaper om plugin.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ett plugin exponerar en install(app, options)-funktion och registreras med app.use. I install kan du registrera globala komponenter och direktiv, lägga till globala egenskaper via config.globalProperties och provide-värden för injicering. Använd plugin för appövergripande funktioner och composables för lokal logik. Därefter strukturerar du ett skalbart projekt.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Utveckling av pluginer” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Utveckling av pluginer”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 3 lektioner.

Vad lär jag mig i ”Utveckling av pluginer”?

Skapa installerbara Vue-pluginer. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 3.

Hur lång tid tar lektionen ”Utveckling av pluginer”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Vue Academy