Vue Academy · Lezione

Architettura dei plugin e app.use()

Oggetto plugin { install(app, options) }, accesso a app.component, app.directive, app.provide.

Architettura dei plugin e app.use() è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Che cos'è un plugin Vue

Un plugin Vue è codice riutilizzabile che aggiunge funzionalità a livello di applicazione: componenti globali, direttive, servizi iniettati o configurazione. Alcuni esempi sono Vue Router, Pinia e le librerie i18n.

Registri un plugin una sola volta con app.use(plugin).

Il contratto di installazione

Un plugin è un oggetto con un metodo install(app, options) oppure una funzione usata direttamente come install. Vue la chiama passandole l'istanza dell'applicazione e tutte le opzioni fornite.

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

export default myPlugin

Registrazione dei componenti globali

All'interno di install, utilizzi app.component(name, definition) per registrare un componente disponibile in ogni template senza doverlo importare.

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

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

Registrazione delle direttive globali

Utilizzi app.directive(name, definition) per registrare globalmente una direttiva personalizzata, come v-focus o v-tooltip.

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

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

Fornire servizi iniettabili

app.provide(key, value) espone un valore che qualsiasi componente discendente può leggere con inject(key). Questo è il modo moderno per condividere servizi, come un client API o una configurazione, senza ricorrere a variabili globali.

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

Utilizzo del servizio fornito

Qualsiasi componente utilizza inject per leggere ciò che il plugin ha fornito. Per maggiore sicurezza, preferisca una chiave di injection tipizzata, ovvero un Symbol, anche se le chiavi stringa funzionano ugualmente.

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

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

Passaggio di opzioni a un plugin

Il secondo argomento di app.use viene inoltrato al parametro options di install. Lo utilizzi per configurare il comportamento al momento della registrazione.

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

I plugin vengono eseguiti prima di mount

Tutte le chiamate a app.use avvengono prima di app.mount. Al momento del mount, ogni componente globale, direttiva e valore fornito è già registrato, quindi il primo rendering può già accedervi.

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

Installazione idempotente

Vue impedisce di installare lo stesso plugin due volte nella stessa app: la seconda chiamata a app.use con un plugin identico viene ignorata. Progetti comunque install in modo sicuro ed eviti effetti collaterali al di fuori dell'istanza dell'applicazione.

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

Un plugin minimale completo

Riunendo tutti gli elementi: un plugin può registrare un componente, una direttiva e fornire un servizio all'interno di un unico metodo install.

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 e composable a confronto

Utilizzi un plugin per la configurazione a livello di app eseguita una sola volta, ad esempio per i componenti globali o per fornire un servizio singleton. Utilizzi un composable per la logica con stato riutilizzabile e consumata da ogni componente. Spesso i plugin configurano ciò che i composable leggono in seguito tramite inject.

Verifica rapida

Verifichi la Sua comprensione dell'architettura dei plugin.

Riepilogo

Ha imparato l'architettura dei plugin:

Un plugin espone install(app, options) oppure è una funzione
app.component e app.directive registrano elementi globali
app.provide espone servizi iniettabili, letti tramite inject
app.use(plugin, options) registra il plugin prima di mount
L'installazione è idempotente: una seconda installazione viene ignorata

Domande Frequenti

La lezione «Architettura dei plugin e app.use()» è gratuita?

Sì — il testo completo di «Architettura dei plugin e app.use()» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Architettura dei plugin e app.use()»?

Oggetto plugin { install(app, options) }, accesso a app.component, app.directive, app.provide. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Architettura dei plugin e app.use()»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Architettura dei plugin e app.use()
Proprietà globali e provide/inject nei plugin
Esempio di plugin per notifiche e toast
Pubblicazione e tipizzazione dei plugin Vue

← Torna a Vue Academy