Vue Academy · Oppitunti

Liitännäisten kehittäminen

Luokaa asennettavia Vue-liitännäisiä.

Oppitunti 2/313 vaihetta

Liitännäisten kehittäminen on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/3. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 3 oppituntia.

Mikä on plugin

Vue-plugin kokoaa sovellustason toiminnallisuuden, jonka voitte asentaa yhdellä kutsulla: globaalit komponentit, direktiivit, ominaisuudet tai kolmannen osapuolen integraatiot. Pluginit ovat tapa, jolla Vue Routerin ja Pinian kaltaiset kirjastot liitetään sovellukseen.

install-funktio

Plugin on olio, jolla on install-metodi (tai joka on pelkkä funktio). Vue kutsuu sitä sovellusinstanssilla ja välittämillänne asetuksilla.

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

Pluginin asentaminen

Rekisteröikää plugin komennolla app.use ja välittäkää halutessanne asetusten olio. Vue suorittaa install-funktion kerran.

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

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

Globaalien komponenttien rekisteröinti

Rekisteröikää komponentit install-funktion sisällä globaaleiksi, jotta sovelluksen kaikki osat voivat käyttää niitä ilman erillistä tuontia.

import BaseButton from "./BaseButton.vue"

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

Globaalien direktiivien rekisteröinti

Plugin voi rekisteröidä myös direktiivejä globaaleiksi ja koota toisiinsa liittyvät DOM-toiminnot yhdeksi asennettavaksi paketiksi.

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

Globaalien ominaisuuksien tarjoaminen

Lisätkää komennolla app.config.globalProperties ominaisuus, joka on käytettävissä jokaisessa komponentti-instanssissa. Tämä sopii esimerkiksi muotoilutyökalun tai HTTP-asiakkaan kaltaisille apuvälineille.

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

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

providen käyttö Composition API:ssa

Composition API -yhteensopivuutta varten käyttäkää pluginissanne app.provide-metodia, jotta komponentit voivat inject-toiminnolla ottaa arvon käyttöön setupissa.

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

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

Asetusten välittäminen

options-argumentin avulla käyttäjät voivat määrittää pluginin asetukset. Lukekaa se install-funktion sisällä toiminnan mukauttamiseksi.

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

Funktiomuotoinen plugin

Plugin voi olla tavallinen funktio install-metodilla varustetun objektin sijaan. Tällöin Vue käsittelee itse funktiota asentajana.

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

app.use(simplePlugin)

Täydellinen plugin-esimerkki

Oikea plugin yhdistää usein useita näistä: komponentin, direktiivin ja globaalin ominaisuuden rekisteröimisen yhdessä install-funktiossa.

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

Milloin plugin kannattaa rakentaa

Käyttäkää pluginia, kun toiminnallisuus kuuluu todella koko sovellukselle, kuten käyttöliittymäkirjastossa, HTTP-kerroksessa, i18n:ssä tai analytiikassa. Ominaisuudelle paikallinen logiikka kannattaa yleensä toteuttaa kevyempänä composablena.

Pikatesti

Testatkaa pluginien tuntemustanne.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Plugin tarjoaa install(app, options)-funktion, ja se rekisteröidään app.use-kutsulla. Install-funktion sisällä voitte rekisteröidä globaaleja komponentteja ja direktiivejä, lisätä globaaleja ominaisuuksia config.globalProperties-määrityksen kautta sekä provide-arvoja injektoitaviksi. Käyttäkää plugineja koko sovelluksen laajuisiin ominaisuuksiin ja composableja paikalliseen logiikkaan. Seuraavaksi jäsennätte skaalautuvan projektin.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Liitännäisten kehittäminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Liitännäisten kehittäminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 3 oppituntia.

Mitä opin oppitunnilla ”Liitännäisten kehittäminen”?

Luokaa asennettavia Vue-liitännäisiä. Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/3.

Kuinka kauan ”Liitännäisten kehittäminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Mixin-komponentit ja mukautetut direktiivit
Liitännäisten kehittäminen
Skaalautuva kansiorakenne

← Takaisin: Vue Academy