Komme i Gang med Vue Plugins

0
25

I de siste månedene, jeg har lært mye om Vue. Fra å bygge SEO-vennlig SPAs til laging killer blogger eller å spille med overganger og animasjoner, jeg har eksperimentert med rammen grundig.

Men det har vært en manglende brikke i hele mitt læring: plugins.

De fleste folk som arbeider med Vue har enten kommer til å stole på plugins som en del av sin arbeidsflyt eller vil sikkert cross stier med plugins et sted nedover veien. Uansett, de er en flott måte å utnytte eksisterende kode uten å hele tiden skrive fra bunnen av.

Mange av dere har sannsynligvis brukt jQuery og er vant til å bruke (eller å gjøre!) plugins for å lage alt fra karuseller og modals å responsive videoer og type. Vi er i utgangspunktet snakker om det samme her med Vue plugins.

Så, ønsker du å gjøre? Jeg kommer til å anta at du er nikket med hodet, slik at vi kan få våre hender skitne sammen med en steg-for-steg guide for å skrive en tilpasset Vue plugin.

Først en liten sammenheng…

Plugins er ikke noe spesielt å Vue og — akkurat som jQuery — du vil finne at det er et bredt utvalg av plugins som gjør mange forskjellige ting. Ved definisjon, er de som viser at et grensesnitt som er gitt for å gi mulighet for utvidelsesmuligheter.

Messing skatt: de er en måte å koble globale funksjoner inn i en app, og utvide dem for din bruk.

De Vue dokumentasjon dekker plugins i stor detalj og gir en utmerket liste over kategorier som plugins vanligvis faller inn i:

  1. Legg til noen globale metoder eller egenskaper.
  2. Legge til en eller flere globale eiendeler: direktiver/filtre/overganger etc.
  3. Legg til en komponent valg av global mixin.
  4. Legg til noen Vue eksempel metoder ved å knytte dem til å Vue.prototypen.
  5. Et bibliotek som inneholder en API for sin egen, mens på samme tid å injisere en kombinasjon av det ovenfor.

OK, OK. Nok forspill. La oss skrive noen kode!

Hva vi gjør

På Spektrum, Snipcart mor agency, våre design går gjennom en godkjenningsprosess, som jeg er sikker på er typisk ved de fleste andre butikker og bedrifter. Vi tillater en klient til å kommentere og komme med forslag på design som de gjennomgå dem slik at til syvende og sist, vi får grønt lys til å fortsette og bygge ting.

Vi vanligvis bruker InVision for alt dette. De kommenterer system er en sentral komponent i InVision. Det gjør at folk klikker på noen del av design og legge igjen en kommentar for samarbeidspartnere direkte der at tilbakemeldingene gir mening. Det er ganske rad.

Så kul som InVision er, tror jeg vi kan gjøre det samme for oss selv med en liten Vue magi og komme ut med en plugin som alle kan bruke, så vel.

Den gode nyheten her er at de er ikke så skremmende. En grunnleggende kunnskap om Vue er alt du trenger for å begynne å tukle med plugins til høyre unna.

Trinn 1. Forberede codebase

En Vue plugin bør inneholde en installerer metode som tar to parametre:

  1. Den globale Vue objekt
  2. Et objekt å innlemme brukerdefinert valg

Skyte opp en Vue prosjektet er super enkelt, takket være Vue CLI-3. Når du har det installert, kan du kjøre følgende kommando linje:

$ vue opprette vue-kommentarer-overlegg
# Svare på noen spørsmål
$ cd-vue-kommentarer-overlegg
$ npm kjøre tjene

Dette gir oss den klassiske “Hello World” starter vi trenger å skru ut en test app som vil sette vår plugin for å bruke.

Trinn 2. Opprette plugin katalogen

Våre plugin har et sted å bo i prosjektet, så la oss lage en mappe der vi kan stappe alt vårt arbeid, og deretter navigere i våre kommando-linjen til den nye katalogen:

$ mkdir src/plugins
$ mkdir src/plugins/CommentsOverlay
$ cd src/plugins/CommentsOverlay

Trinn 3: koble opp den grunnleggende ledninger

En Vue plugin er i utgangspunktet et objekt med en installerer funksjon som blir utført når programmet ved hjelp av det har det med Vue.(bruk).

Installer funksjonen mottar den globale Vue-objekt som parameter og en valg-objekt:

// src/plugins/CommentsOverlay/index.js
//
eksport standard {
installer(vue, opts){
– konsollen.logg(‘Installere CommentsOverlay plugin!’)
// Moro vil skje her
}
}

Nå, la oss plugge dette i vår “Hello World” test-appen:

// src/main.js
import Vue fra ‘vue’
import-Appen fra ‘./Appen.vue’
import CommentsOverlay fra ‘./plugins/CommentsOverlay’ // import plugin

Vue.bruk(CommentsOverlay) // sette plugin til bruk!

Vue.config.productionTip = false

nye Vue({ gjengi: createElement => createElement(App)}).$mount(‘#app’)

Trinn 4: Gi støtte for valg

Vi ønsker plugin for å være konfigurerbart. Dette vil tillate noen å bruke det i sin egen app for å finpusse ting opp. Det gjør også våre plugin mer allsidig.

Vi vil gjøre valg det andre argumentet for å installere funksjonen. La oss lage standard valg som vil representere base oppførsel av plugin, dvs. hvordan det fungerer når det ikke er noen custom-alternativet er angitt:

// src/plugins/CommentsOverlay/index.js

const optionsDefaults = {
// Henter aktuell innlogget bruker som er å poste en kommentar
commenterSelector() {
tilbake {
id: null,
fullName: ‘Anonym’,
initialer: ‘–‘,
e-post: null
}
},
data: {
// Hash-objekt av alle elementer som kan kommenteres
mål: {},
onCreate(opprettet) {
dette.mål[opprettet.targetId].kommentarer.trykk(opprettet)
},
onEdit(editted) {
// Dette er selvfølgelig ikke nødvendig
// Det er det for å illustrere hva som kan gjøres i innb. av en ekstern samtale
la kommentarer = dette.mål[editted.targetId].kommentarer
kommentarer.skjøte(kommentarer.indexOf(editted), 1, editted);
},
onRemove(fjernet) {
la kommentarer = dette.mål[fjernet.targetId].kommentarer
kommentarer.skjøte(kommentarer.indexOf(fjernet), 1);
}
}
}

Så, vi kan slå de alternativene som blir vedtatt i installere funksjonen på toppen av disse standarder:

// src/plugins/CommentsOverlay/index.js

eksport standard {
installer(vue, opts){
// Merge-valg argument i valg standarder
const valg = { …optionsDefaults, …opts }
// …
}
}

Trinn 5: Opprette et eksempel for å kommentere lag

En ting du ønsker å unngå med denne plugin er å ha sin DOM og stiler forstyrre app det er installert på. For å minimere sjansene for at dette skjer, er en vei å gå er å gjøre plugin bor i en annen rot Vue eksempel, på utsiden av de viktigste app-komponent treet.

Legg til følgende for å installere funksjonen:

// src/plugins/CommentsOverlay/index.js

eksport standard {
installer(vue, opts){

// Lag plugin er roten Vue eksempel
const rot = new Vue({
data: { mål: valg.data.mål },
render: createElement => createElement(CommentsRootContainer)
})

// Mount rot Vue eksempel på nye div-elementet som er lagt til kroppen
rot.$mount(dokument.kroppen.appendChild(dokument.createElement(‘div’)))

// Registrere data mutasjon handlere på rot eksempel
rot.$på(‘opprett’, options.data.onCreate)
rot.$på(‘rediger’, options.data.onEdit)
rot.$på(‘fjern’, options.data.onRemove)

// Roten eksempel tilgjengelig i alle komponenter
vue.prototypen.$commentsOverlay = root

}
}

Viktige biter i tekstutdraget ovenfor:

  1. Appen liv i en ny div på slutten av kroppen.
  2. Event-handlere definert i alternativer-objektet er koblet til tilsvarende hendelser på rot for eksempel. Dette vil være fornuftig ved slutten av opplæringen, løftet.
  3. $CommentsOverlay eiendom lagt til Vue prototype eksponerer roten eksempel til alle Vue komponenter i programmet.

Trinn 6: Lage en tilpasset direktiv

Til slutt, trenger vi en måte for apper ved hjelp av plugin-modulen for å fortelle det som element vil ha kommentarer funksjonalitet aktivert. Dette er en sak for en tilpasset Vue direktivet. Siden plugins har tilgang til den globale Vue objekt, kan de definere nye direktiver.

Vår vil bli kalt kommentarer-aktivert, og det går som dette:

// src/plugins/CommentsOverlay/index.js

eksport standard {
installer(vue, opts){

// Register tilpasset direktiv som gjør det mulig å kommentere på ethvert element
vue.direktiv(‘kommentarer-aktivert’, {
bind(el, binding) {

// Legg til dette målet oppføring i roten eksempel er data
rot.$sett(
rot.mål,
bindende.verdi,
{
id: bindende.verdi,
kommentarer: [],
getRect: () => el.getBoundingClientRect(),
});

el.addEventListener(‘click’, (evt) => {
rot.$emit(`commentTargetClicked__${bindende.value}`, {
id: uuid(),
commenter: valg.commenterSelector(),
clientX: evt.clientX,
clientY: evt.clientY
})
})
}
})
}
}

Direktivet gjør to ting:

  1. Det legger til sitt mål å roten eksempel data. Nøkkelen er definert for det er bindende.verdi. Den gjør det mulig for forbrukerne å spesifisere deres egen ID for mål-elementer, for eksempel slik : <img v-kommentarer-aktivert=”imgFromDb.id” src=”imgFromDb.src” />.
  2. Det registrerer et klikk event handler på mål-element, som i sin tur sender ut en hendelse på rot for eksempel for denne bestemte mål. Vi vil komme tilbake til hvordan å håndtere det på et senere tidspunkt.

Installer funksjonen er nå komplett! Nå kan vi gå videre til å kommentere funksjonalitet og komponenter til å gjengi.

Trinn 7: Etablere en “Kommentarer Rot-Container” komponent

Vi kommer til å opprette en CommentsRootContainer og bruke det som roten del av plugin-GRENSESNITT. La oss ta en titt på den:

<!–
src/plugins/CommentsOverlay/CommentsRootContainer.vue –>

<mal>
<div>
<kommentarer-overlegg
v-=”målet i mål”
:target=”target”
:key=”målet.id”>
</kommentarer-overlay>
</div>
</template>

<script>
import CommentsOverlay fra “./CommentsOverlay”;

eksport standard {
komponenter: { CommentsOverlay },
beregnet: {
mål() {
gå tilbake til denne.$rot.mål;
}
}
};
</script>

Hva er dette å gjøre? Vi har i utgangspunktet opprettet en wrapper som holder en annen komponent vi har ennå å gjøre: CommentsOverlay. Du kan se hvor komponenten som blir importert i skriptet og de verdier som blir forespurt inne i wrapper-malen (mål og mål.- id). Legg merke til hvordan målet beregnet eiendommen er avledet fra roten komponent data.

Nå, overlay-komponenten er der all magien skjer. La oss få til det!

Trinn 8: Gjøre magi med en “Kommentarer Overlay” – komponenten

OK, jeg er i ferd med å kaste en masse kode på deg, men vi vil være sikker på å gå gjennom det:

<!– src/plugins/CommentsOverlay/CommentsRootContainer.vue –>

<mal>
<div class=”kommentarer-overlay”>

<div class=”kommentarer-overlay – __ – container” v=”kommentar i mål.kommentarer” :key=”kommentar.id” :style=”getCommentPostition(kommentar)”>
<- knappen class=”kommentarer-overlay – __ – indikator” v-hvis=”redigering != kommentar” @klikk=”onIndicatorClick(kommentar)”>
{{ kommentar.commenter.initialer }}
</button>
<div v-annet class=”kommentarer-overlay – __form”>
<p>{{ getCommentMetaString(kommentar) }}</p>
<textarea ref=”tekst” v-modell=”tekst” />
<- knapp @klikk=”rediger” :deaktivert=”!text”>Lagre</button>
<- knapp @klikk=”avbryt”>Avbryt</button>
<- knapp @klikk=”fjern”>Rediger</button>
</div>
</div>

<div class=”kommentarer-overlay – __form” v-hvis=”dette.å skape” :style=”getCommentPostition(denne.oppretting)”>
<textarea ref=”tekst” v-modell=”tekst” />
<- knapp @klikk=”lag” :deaktivert=”!text”>Lagre</button>
<- knapp @klikk=”avbryt”>Avbryt</button>
</div>

</div>
</template>

<script>
eksport standard {
rekvisittar: [‘target’],

data() {
tilbake {
tekst: null,
redigering: null,
lager: null
};
},

metoder: {
onTargetClick(nyttelast) {
dette._resetState();
const rect = dette.målet.getRect();

dette.opprette = {
id: nyttelast.id,
targetId: dette.målet.id,
commenter: nyttelast.commenter,
ratioX: (nyttelast.clientX – rect.venstre) / rect.bredde,
ratioY: (nyttelast.clientY – rect.øverst) / rect.høyde
};
},
onIndicatorClick(kommentar) {
dette._resetState();
dette.tekst = kommentar.tekst;
dette.redigering = kommentar;
},
getCommentPostition(kommentar) {
const rect = dette.målet.getRect();
const x = kommentar.ratioX <em> rect.bredde + rect.til venstre;
const y = kommentar.ratioY <em> rect.høyde + rect.topp;
tilbake { venstre: `${x}px`>, topp: `${y}px` };
},
getCommentMetaString(kommentar) {
tilbake `${
kommentar.commenter.fullName
} – ${kommentar.tidsstempelet.getMonth()}/${kommentar.tidsstempelet.getDate()}/${kommentar.tidsstempelet.getFullYear()}`;
},
rediger() {
dette.redigering.tekst = dette.tekst;
dette.redigering.timestamp = new Date();
dette._emit(“rediger”, dette.redigering);
dette._resetState();
},
opprette() {
dette.å skape.tekst = dette.tekst;
dette.å skape.timestamp = new Date();
dette._emit(“lag”, dette.oppretting);
dette._resetState();
},
avbryt() {
dette._resetState();
},
fjern() {
dette._emit(“fjern”, dette.redigering);
dette._resetState();
},
_emit(evt, data) {
dette.$rot.$emit(evt, data);
},
_resetState() {
dette.tekst = null;
dette.redigering = null;
dette.opprette = null;
}
},

montert() {
dette.$rot.$på(`commentTargetClicked__${dette.målet.id}`, dette.onTargetClick
);
},

beforeDestroy() {
dette.$rot.$off(`commentTargetClicked__${dette.målet.id}`, dette.onTargetClick
);
}
};
</script>

Jeg vet, jeg vet. Litt skremmende. Men det er i utgangspunktet bare gjør et par viktige ting.

First off, hele første del inneholdt i <mal> – tag-en etablerer markup for en kommentar popover som skal vises på skjermen med et skjema for å sende inn en kommentar. Med andre ord, dette er HTML-koding som gjør våre kommentarer.

Neste opp, kan vi skrive skript som strøm måte våre kommentarer oppføre seg. Komponenten får full mål objektet som en prop. Dette er hvor kommentarer utvalg og posisjoneringsinformasjonen som er lagret.

Så, det magiske. Vi har definert flere metoder som gjør viktige ting når den utløses:

  • Lytter etter et klikk
  • Gjengir en kommentar-boksen og stillinger hvor det deretter ble henrettet
  • Fanger brukeren innsendte data, inkludert brukerens navn og kommentar
  • Gir affordances til å opprette, redigere, fjerne, og avbryt en kommentar

Til slutt, det handler for commentTargetClicked hendelser som vi så tidligere er klart innenfor montert og beforeDestroy kroker.

Det er verdt å merke seg at roten eksempel brukes som hendelsen buss. Selv om denne tilnærmingen er ofte motløs, dømde eg det rimelig i denne sammenheng, siden komponentene ikke er offentlig eksponert og kan sees som en monolittisk enhet.

Aaaaaaand, vi er klar! Etter en bit av styling (jeg vil ikke utvide på min tvilsomme CSS ferdigheter), vår plugin er klar til å ta brukeren kommentarer på mål-elementer!

Demo tid!

Live-Demo

GitHub-Repo

Å bli kjent med flere plugins Vue

Vi tilbrakte mesteparten av dette innlegget å skape en Vue plugin, men jeg ønsker å gi dette full sirkel til grunn vi bruke plugins i det hele tatt. Jeg har satt sammen en kort liste over svært populære Vue plugins for å vise frem alle de fantastiske tingene du få tilgang til ved å sette plugins til bruk.

  • Vue-ruter – Hvis du bygger single-side-programmer, vil du uten tvil må Vue-ruteren. Som den offisielle ruter for Vue, det integreres dypt med sin kjerne til å utføre oppgaver som kartlegging komponenter og hekkende ruter.
  • Vuex – å Tjene som et sentralisert butikk for alle komponentene i et program, Vuex er en no-brainer hvis du ønsker å bygge store apper med høy vedlikehold.
  • Vee-validere – Når bygningen er typisk bransjeprogrammer, form validering kan fort bli uhåndterlig hvis de ikke håndteres med forsiktighet. Vee-validere tar seg av alt i en grasiøs måte. Den bruker direktiver, og det er bygget med lokalisering i tankene.

Jeg vil begrense meg til disse plugins, men vet at det er mange andre som venter på å hjelpe Vue utviklere, som deg selv!

Og, hei! Hvis du ikke kan finne en plugin som tjener ditt behov, du har nå litt hands-on erfaring for å skape et tilpasset plugin. 😀