Vue Academy · Lekcja

Architektura wtyczek i app.use()

Obiekt wtyczki { install(app, options) }, dostęp do app.component, app.directive i app.provide.

Lekcja 1 z 413 kroki

Architektura wtyczek i app.use() to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Czym jest wtyczka Vue

Wtyczka Vue to wielokrotnie używalny kod, który dodaje funkcje dostępne na poziomie aplikacji — globalne komponenty, dyrektywy, wstrzykiwane usługi lub konfigurację. Przykłady: Vue Router, Pinia i biblioteki i18n.

Wtyczkę rejestruje się raz za pomocą app.use(plugin).

Kontrakt install

Wtyczka jest albo obiektem z metodą install(app, options), albo funkcją używaną bezpośrednio jako install. Vue wywołuje ją z instancją aplikacji i dowolnymi opcjami przekazanymi podczas rejestracji.

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

export default myPlugin

Rejestrowanie globalnych komponentów

Wewnątrz install należy użyć app.component(name, definition), aby zarejestrować komponent dostępny w każdym szablonie bez konieczności jego importowania.

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

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

Rejestrowanie globalnych dyrektyw

Należy użyć app.directive(name, definition), aby globalnie zarejestrować niestandardową dyrektywę, taką jak v-focus lub v-tooltip.

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

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

Udostępnianie wstrzykiwanych usług

app.provide(key, value) udostępnia wartość, którą każdy komponent potomny może odczytać za pomocą inject(key). Jest to nowoczesny sposób współdzielenia usług (klienta API, konfiguracji) bez używania zmiennych globalnych.

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

Korzystanie z udostępnionej usługi

Każdy komponent używa inject, aby odczytać wartość udostępnioną przez wtyczkę. Dla większego bezpieczeństwa należy preferować typowany klucz wstrzykiwania (obiekt Symbol), choć klucze tekstowe również działają.

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

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

Przekazywanie opcji do wtyczki

Drugi argument funkcji app.use jest przekazywany jako parametr options funkcji install. Należy używać go do konfigurowania zachowania podczas rejestracji.

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

Wtyczki uruchamiają się przed mount

Wszystkie wywołania app.use następują przed app.mount. W chwili montowania każdy globalny komponent, dyrektywa i udostępniona wartość są już zarejestrowane, więc pierwszy render ma do nich dostęp.

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

Idempotentna instalacja

Vue zabezpiecza przed zainstalowaniem tej samej wtyczki dwa razy w jednej aplikacji — drugie wywołanie app.use dla identycznej wtyczki jest ignorowane. Mimo to funkcja install powinna być bezpieczna i nie powodować skutków ubocznych poza instancją aplikacji.

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

Kompletna minimalna wtyczka

Składając wszystko razem: wtyczka może zarejestrować komponent i dyrektywę oraz udostępnić usługę w ramach jednej metody 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' })
  }
}

Wtyczka a composable

Wtyczki należy używać do konfiguracji obejmującej całą aplikację i wykonywanej raz (globalne komponenty, udostępnianie usługi typu singleton). Composable służy do wielokrotnie używalnej logiki stanowej wykorzystywanej przez poszczególne komponenty. Wtyczki często konfigurują elementy, które composables później odczytują za pomocą inject.

Szybkie sprawdzenie

Proszę sprawdzić zrozumienie architektury wtyczek.

Odpowiedz w interaktywnej lekcji

Podsumowanie

W tej lekcji poznali Państwo architekturę wtyczek:

Wtyczka udostępnia install(app, options) (lub sama jest funkcją)
app.component / app.directive rejestrują elementy globalne
app.provide udostępnia usługi wstrzykiwane i odczytywane za pomocą inject
app.use(plugin, options) rejestruje wtyczkę przed mount
Instalacja jest idempotentna — ponowna instalacja jest ignorowana

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Architektura wtyczek i app.use()” jest bezpłatna?

Tak — pełny tekst „Architektura wtyczek i app.use()” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Architektura wtyczek i app.use()”?

Obiekt wtyczki { install(app, options) }, dostęp do app.component, app.directive i app.provide. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Architektura wtyczek i app.use()”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Architektura wtyczek i app.use()
Właściwości globalne oraz provide/inject we wtyczkach
Przykład wtyczki powiadomień i toastów
Publikowanie i typowanie wtyczek Vue

← Powrót do Vue Academy