Vue Academy · Lektion

Pluginarkitektur och app.use()

Pluginobjektet { install(app, options) }, åtkomst till app.component, app.directive och app.provide.

Lektion 1 av 413 steg

Pluginarkitektur och app.use() är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 1 av 4. 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 4 lektioner.

Vad är ett Vue-plugin

Ett Vue-plugin är återanvändbar kod som lägger till funktionalitet på appnivå — globala komponenter, direktiv, injicerade tjänster eller konfiguration. Exempel är Vue Router, Pinia och i18n-bibliotek.

Ni registrerar ett plugin en gång med app.use(plugin).

Kontraktet för install

Ett plugin är antingen ett objekt med en install(app, options)-metod eller en funktion som används direkt som install. Vue anropar den med appinstansen och de alternativ ni skickar med.

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

export default myPlugin

Registrera globala komponenter

Inuti install använder ni app.component(name, definition) för att registrera en komponent som är tillgänglig i alla mallar utan att importeras.

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

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

Registrera globala direktiv

Använd app.directive(name, definition) för att registrera ett anpassat direktiv globalt, till exempel ett v-focus- eller v-tooltip-direktiv.

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

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

Tillhandahålla injicerbara tjänster

app.provide(key, value) exponerar ett värde som alla underordnade komponenter kan läsa med inject(key). Detta är det moderna sättet att dela tjänster, till exempel en API-klient eller konfiguration, utan globala variabler.

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

Använda den tillhandahållna tjänsten

Alla komponenter kan använda inject för att läsa det som pluginet tillhandahöll. Föredra en typad injektionsnyckel, en Symbol, för ökad säkerhet, men strängnycklar fungerar också.

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

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

Skicka alternativ till ett plugin

Det andra argumentet till app.use vidarebefordras som parametern options till install. Använd det för att konfigurera beteendet vid registreringen.

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')

Plugin körs före mount

Alla anrop till app.use görs före app.mount. När mount körs är alla globala komponenter, direktiv och tillhandahållna värden registrerade, så den första renderingen har redan tillgång till dem.

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

Idempotent installation

Vue förhindrar att samma plugin installeras två gånger i en app — det andra app.use-anropet med ett identiskt plugin ignoreras. Utforma ändå install så att det är säkert och undvik bieffekter utanför appinstansen.

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

Ett komplett minimalt plugin

Om vi sätter ihop delarna kan ett plugin registrera en komponent och ett direktiv samt tillhandahålla en tjänst, allt i samma install-metod.

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 jämfört med composable

Använd ett plugin för appomfattande konfiguration som körs en gång, till exempel globala komponenter eller tillhandahållandet av en singleton-tjänst. Använd en composable för återanvändbar tillståndslogik som används av varje komponent. Plugin används ofta för att konfigurera sådant som composables senare läser via inject.

Snabbtest

Testa era kunskaper om pluginarkitektur.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni lärde er om pluginarkitektur:

Ett plugin exponerar install(app, options) eller är en funktion
app.component och app.directive registrerar globala funktioner
app.provide exponerar injicerbara tjänster som läses via inject
app.use(plugin, options) registrerar pluginet före mount
Installationen är idempotent — en andra installation ignoreras

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 ”Pluginarkitektur och app.use()” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Pluginarkitektur och app.use()”, 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 4 lektioner.

Vad lär jag mig i ”Pluginarkitektur och app.use()”?

Pluginobjektet { install(app, options) }, åtkomst till app.component, app.directive och app.provide. 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 1 av 4.

Hur lång tid tar lektionen ”Pluginarkitektur och app.use()”?

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

Pluginarkitektur och app.use()
Globala egenskaper och provide/inject i plugins
Exempel på notis- och toast-plugin
Publicera och typa Vue-plugins

← Tillbaka till Vue Academy