Vue Academy · Lekcja

Tworzenie pluginów

Tworzenie instalowalnych pluginów Vue.

Tworzenie pluginów to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 3. 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 3 lekcji w sumie.

Czym jest plugin?

Plugin opakowuje funkcjonalność na poziomie aplikacji, którą można zainstalować jednym wywołaniem: komponenty globalne, dyrektywy, właściwości lub integracje z narzędziami innych firm. Pluginy pozwalają bibliotekom takim jak Vue Router i Pinia podłączać się do aplikacji.

Funkcja install

Plugin jest obiektem z metodą install albo po prostu funkcją. Vue wywołuje ją z instancją aplikacji i dowolnymi przekazanymi opcjami.

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

Instalowanie pluginu

Plugin należy zarejestrować za pomocą app.use, opcjonalnie przekazując obiekt opcji. Vue uruchamia funkcję install jeden raz.

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

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

Rejestrowanie komponentów globalnych

W funkcji install należy rejestrować komponenty globalnie, aby każda część aplikacji mogła ich używać bez importowania.

import BaseButton from "./BaseButton.vue"

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

Rejestrowanie dyrektyw globalnych

Plugin może również rejestrować dyrektywy globalnie, łącząc powiązane zachowania DOM w jeden instalowalny pakiet.

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

Udostępnianie właściwości globalnych

Za pomocą app.config.globalProperties można dodać właściwość dostępną w każdej instancji komponentu, co jest przydatne w przypadku narzędzi takich jak formatter lub klient HTTP.

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

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

Korzystanie z provide w Composition API

Aby zapewnić zgodność z Composition API, należy użyć app.provide we wtyczce, aby komponenty mogły skorzystać z wartości przez inject w setup.

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

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

Przekazywanie opcji

Argument options pozwala użytkownikom konfigurować wtyczkę. Należy odczytać go wewnątrz install, aby dostosować jej działanie.

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

Wtyczka jako funkcja

Wtyczka może być zwykłą funkcją zamiast obiektu z metodą install; Vue traktuje samą funkcję jako instalator.

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

app.use(simplePlugin)

Kompletny przykład wtyczki

Rzeczywista wtyczka często łączy kilka takich elementów: rejestrację komponentu, dyrektywy i właściwości globalnej w jednej funkcji install.

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

Kiedy tworzyć wtyczkę

Wtyczkę warto wybrać, gdy funkcjonalność ma rzeczywiście dotyczyć całej aplikacji: zestawu komponentów UI, warstwy HTTP, i18n lub analityki. W przypadku logiki lokalnej dla danej funkcji zwykle lepszym i lżejszym wyborem jest composable.

Szybki test

Sprawdź swoją wiedzę o wtyczkach.

Podsumowanie

Wtyczka udostępnia funkcję install(app, options) i jest rejestrowana za pomocą app.use. Wewnątrz install można rejestrować globalne komponenty i dyrektywy, dodawać właściwości globalne za pomocą config.globalProperties oraz provide wartości do wstrzykiwania. Wtyczki służą do obsługi funkcji obejmujących całą aplikację, a composables — do lokalnej logiki. Następnie zajmiemy się strukturą skalowalnego projektu.

Często zadawane pytania

Czy lekcja „Tworzenie pluginów” jest bezpłatna?

Tak — pełny tekst „Tworzenie pluginów” 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 3 lekcji w sumie.

Co nauczysz się w „Tworzenie pluginów”?

Tworzenie instalowalnych pluginów Vue. Ć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 2 z 3.

Ile czasu zajmuje lekcja „Tworzenie pluginów”?

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

← Powrót do Vue Academy