Komma Igång med Vue Plugins

0
22

Under de senaste månaderna, jag har lärt mig en hel del om Vue. Från att bygga SEO-vänlig Spa för att crafting killer bloggar eller spelar med övergångar och animeringar, jag har experimenterat med ramen ordentligt.

Men det har varit en saknad bit i hela mitt lärande: plugins.

Mest folk som arbetar med Vue har antingen kommer att förlita sig på plugins som en del av sitt arbetsflöde eller kommer säkert att korsa vägar med plugins någonstans på vägen. Hur som helst, de är ett bra sätt att utnyttja befintlig kod utan att hela tiden skriva om från början.

Många av er har förmodligen använt jQuery och är vana att använda (eller att göra!) plugins för att skapa allt från karuseller och modals responsiv videor och typ. Vi är i grund och botten handlar om samma sak här med Vue plugins.

Så, vill du göra en? Jag ska anta att du nickar huvudet så att vi kan få våra händer smutsiga tillsammans med en steg-för-steg-guide för att skriva en egen Vue plugin.

Först, lite sammanhang…

Plugins är inte något specifikt för att Vue och — precis som jQuery — du kommer att finna att det finns ett brett utbud av plugins som gör många olika saker. Per definition, de tyder på att ett gränssnitt tillhandahålls för att möjliggöra för utbyggbarhet.

Mässing skatt: de är ett sätt att koppla globala funktioner i en app och förlänga dem för dig.

De Vue dokumentationen omfattar plugins in i minsta detalj och erbjuder en utmärkt lista över kategorier som plugins faller i allmänhet:

  1. Lägg till några globala metoder eller egenskaper.
  2. Lägg till en eller flera globala tillgångar: direktiv/filter/övergångar etc.
  3. Lägga till vissa alternativ för komponenter av den globala mixin.
  4. Lägg till några Vue exempel metoder genom att bifoga dem till Vue.prototyp.
  5. Ett bibliotek som tillhandahåller ett API för sina egna, samtidigt som att injicera en kombination av ovanstående.

OK, OK. Nog förspel. Låt oss skriva lite kod!

Vad vi gör

På Spektrum, Snipcart mamma byrå, våra mönster går igenom en godkännandeprocess, som jag är säker på är typiska på de flesta andra butiker och företag. Vi tillåter en klient att kommentera och komma med förslag på konstruktioner som de går igenom dem så att vi i slutändan får grönt ljus att fortsätta och bygga sak.

Vi använder i allmänhet InVision för allt detta. De kommenterar systemet är en central komponent i InVision. Det gör att folk klickar på någon del av den design och lämna en kommentar för medarbetare direkt om att feedback är vettigt. Det är ganska rad.

Lika cool som InVision är, jag tror att vi kan göra samma sak för oss med lite Vue magi och kom ut med en plugin som alla kan använda.

Den goda nyheten här är att de är inte så skrämmande. En grundläggande kunskap av Vue är allt du behöver för att börja mixtra med plugins direkt.

Steg 1. Förbereda codebase

En Vue plugin bör innehålla en installation metod som tar två parametrar:

  1. Den globala Vue objekt
  2. Ett objekt som innehåller användardefinierade alternativ

Att skjuta upp en Vue projektet är super enkelt, tack vare Vue CLI-3. När du har det installerat, kör du följande på kommandoraden:

$ vue skapa vue-kommentarer-overlay
# Svara på några frågor
$ cd-vue-kommentarer-overlay
$ npm köra tjäna

Detta ger oss den klassiska “Hello World” start vi behöver för att skruva en test-app, som kommer att sätta vårt plugin att använda.

Steg 2. Skapa plugin-katalogen

Vår plugin har att leva någonstans i projektet, så låt oss skapa en katalog där vi kan klämma in allt vårt arbete, och sedan navigera genom vår kommandoraden till den nya katalogen:

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

Steg 3: koppla in den grundläggande ledningar

En Vue plugin är i grunden ett objekt med en installation funktion som körs när applikationen med hjälp av det har det med Vue.använd().

Installera funktionen tar emot den globala Vue objekt som parameter och en alternativ objekt:

// src/plugins/CommentsOverlay/index.js
//
export standard {
installera(vue, opts){
konsolen.log(‘Installera CommentsOverlay plugin!’)
// Roligt som kommer att hända här
}
}

Nu, låt oss plug detta i våra “Hello World” test-app:

// src/main.js
importera Vue från ‘vue’
import från App ‘./App.vue’
importera CommentsOverlay från”. /plugins/CommentsOverlay’ // import plugin

Vue.använd(CommentsOverlay) // sätter plugin att använda!

Vue.config.productionTip = false

nya Vue({ göra: createElement => createElement(App)}).$mount(‘#app’)

Steg 4: Ge stöd för val

Vi vill plugin för att vara anpassningsbar. Detta kommer att tillåta någon att använda det i sin egen app för att justera saker upp. Det gör också vår plugin mer mångsidig.

Vi kommer att göra val det andra argumentet för att installera funktionen. Låt oss skapa den förvalda alternativ som kommer att utgöra basen beteende av plugin, det vill säga hur det fungerar när inget eget alternativ är specificerat:

// src/plugins/CommentsOverlay/index.js

const optionsDefaults = {
// Hämtar den aktuella inloggade användare kan posta en kommentar
commenterSelector() {
return {
id: null,
fullName: ‘Anonym’,
initialer: ‘–‘,
e-post: null
}
},
uppgifter: {
// Hash-objekt av alla element som kan kommenteras
mål: {},
onCreate(skapats) {
detta.mål[skapats.targetId].kommentarer.push(skapad)
},
onEdit(editted) {
// Detta är naturligtvis inte nödvändigt
// Det är där för att illustrera vad som kan göras i återuppringning av ett fjärranrop
låt kommentarer = den här.mål[editted.targetId].kommentarer
kommentarer.splice(kommentarer.indexOf(editted), 1, editted);
},
onRemove(bort) {
låt kommentarer = den här.mål[bort.targetId].kommentarer
kommentarer.splice(kommentarer.indexOf(bort), 1);
}
}
}

Då kan vi slå ihop de alternativ som får skickas in i installera funktion på toppen av dessa inställningar:

// src/plugins/CommentsOverlay/index.js

export standard {
installera(vue, opts){
// Sammanfoga alternativ argument in alternativ för standardinställningar
const alt = { …optionsDefaults, …väljer }
// …
}
}

Steg 5: Skapa en instans för att kommentera lager

En sak du vill undvika med detta plugin är att ha sin DOM och stilar störa app är installerad på. För att minimera risken för att detta händer, en väg att gå är att göra plugin leva i en annan rot Vue exempel, utanför den huvudsakliga app komponent träd.

Lägg till följande för att installera funktionen:

// src/plugins/CommentsOverlay/index.js

export standard {
installera(vue, opts){

// Skapa plugin rot-Vue exempel
const root = new Vue({
uppgifter: { mål: alternativ.uppgifter.målen },
gör: createElement => createElement(CommentsRootContainer)
})

// Montera root-Vue exempel på nya div-element som lagts till kroppen
roten.$mount(dokument.organ.appendChild(dokument.createElement(‘div’)))

// Registrera data mutation handläggare på rot exempel
roten.$(‘skapa’, alternativ.uppgifter.onCreate)
roten.$på (“redigera”, alternativ.uppgifter.onEdit)
roten.$(‘ta bort’, alternativ.uppgifter.onRemove)

// Tjäna roten exempel finns i alla komponenter
vue.prototyp.$commentsOverlay = root

}
}

Viktiga bitar i utdraget ovan:

  1. Appen liv i ett nytt div-i slutet av kroppen.
  2. De händelsehanterare som definieras i alternativ objektet är ansluten till motsvarande händelser på roten exempel. Detta kommer att göra känsla av slutet av handledningen, lovar.
  3. $CommentsOverlay egendom lagts till Vue: s prototyp utsätter root exempel att alla Vue komponenter i ansökan.

Steg 6: Gör en egen direktiv

Slutligen behöver vi ett sätt för program att använda plugin för att tala om vilka element som ska ha kommentarer funktioner aktiverade. Detta är ett fall för en anpassad Vue direktiv. Eftersom plugins har tillgång till den globala Vue objekt, de kan definiera nya direktiv.

Vår kommer att vara namnet kommentarer-aktiverad, och den går så här:

// src/plugins/CommentsOverlay/index.js

export standard {
installera(vue, opts){

// Registrera egna direktiv tha gör att kommentera på alla element
vue.direktiv (“kommentarer-aktiverad’, {
bind(el, bindande) {

// Lägg till detta mål har trätt i roten exempel data
roten.$set(
roten.mål,
bindande.värde
{
id: bindande.värde
kommentarer: [],
getRect: () => el.getBoundingClientRect(),
});

el.addEventListener (“klick”, (evt) => {
roten.$släpper ut(`commentTargetClicked__${bindande.värde}`, {
id: uuid(),
kommentera: alternativ.commenterSelector(),
clientX: evt.clientX,
clientY: evt.clientY
})
})
}
})
}
}

Direktivet innebär två saker:

  1. Det lägger sitt mål till roten exempel data. Den nyckel som definierats för den är bindande.värde. Det gör det möjligt för konsumenterna att ange deras eget ID för mål element, så här : <img v-kommentarer-aktiverad=”imgFromDb.id” src=”imgFromDb.src” />.
  2. Den registrerar ett klick händelsehanterare på målet element, som i sin tur avger en händelse på roten exempel för detta mål. Vi återkommer till hur man hanterar det senare.

Installera funktionen är nu klar! Nu kan vi gå vidare till att kommentera funktioner och komponenter att göra.

Steg 7: Skapa en “Kommentarer Root Container” komponent

Vi kommer att skapa en CommentsRootContainer och använda det som root component plugin ‘ s UI. Låt oss ta en titt på det:

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

<mall>
<div>
<synpunkter-overlay
v-for=”mål i mål”
:target=”mål”
:key=”mål.id”>
</comments-överlägg>
</div>
</template>

<script>
importera CommentsOverlay från “./CommentsOverlay”;

export standard {
komponenter: { CommentsOverlay },
beräknad: {
mål() {
tillbaka detta.$roten.målen;
}
}
};
</script>

Vad är det här att göra? Vi har i princip skapat ett skal som håller en annan komponent som vi har kvar att göra: CommentsOverlay. Du kan se var den komponent som importeras i manuset och de värden som efterfrågas inuti omslaget mall (mål och mål.id). Notera hur målet beräknas egendom som härrör från roten komponent data.

Nu, överlägg komponent är där all magi händer. Låt oss få till det!

Steg 8: Gör magi med en “Kommentarer Overlay” komponent

OK, jag är på väg att slänga en massa kod på dig, men vi ska se till att gå igenom det:

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

<mall>
<div class=”comments-overlay”>

<div class=”comments-overlay__container” v-for=”kommentar i mål.kommentarer” :key=”kommentar.id” :style=”getCommentPostition(kommentar)”>
<knappen class=”comments-overlay__indikator för” v-if=”redigering != kommentar” @klicka=”onIndicatorClick(kommentar)”>
{{ kommentar.kommentera.initialer }}
</button>
<div v-annat class=”comments-overlay__form”>
<p>{{ getCommentMetaString(kommentar) }}</p>
<textarea ref=”text” – v-modell=”text” />
<knappen @klicka=”redigera” :handikappinrättningar=”!sms: a”>Spara</button>
<knappen @klicka=”avbryt”>Avbryt</button>
<knappen @klicka=”ta bort”>ta Bort</button>
</div>
</div>

<div class=”comments-overlay__form” v-if=”detta.att skapa” :style=”getCommentPostition(det här.skapa)”>
<textarea ref=”text” – v-modell=”text” />
<knappen @klicka=”skapa” :handikappinrättningar=”!sms: a”>Spara</button>
<knappen @klicka=”avbryt”>Avbryt</button>
</div>

</div>
</template>

<script>
export standard {
rekvisita: [‘mål’],

data() {
return {
text: null,
redigering: null,
skapa: null
};
},

metoder: {
onTargetClick(nyttolast) {
detta._resetState();
const rect = detta.- målet.getRect();

detta.skapar = {
id: nyttolast.id,
targetId: här.- målet.id,
kommentera: nyttolast.kommentera,
ratioX: (nyttolast.clientX – rekt.vänster) / rekt.bredd
ratioY: (nyttolast.clientY – rekt.överst) / rekt.höjd
};
},
onIndicatorClick(kommentar) {
detta._resetState();
detta.text = kommentar.sms: a;
detta.redigering = kommentar;
},
getCommentPostition(kommentar) {
const rect = detta.- målet.getRect();
const x = kommentar.ratioX <em> rect.bredd + rect.vänster;
const y = kommentar.ratioY <em> rect.höjd + rect.top;
return { left: `${x}px`>, topp: `${y}px` };
},
getCommentMetaString(kommentar) {
return `${
kommentera.kommentera.fullName
} – ${kommentar.tidsstämpel.getMonth()}/${kommentar.tidsstämpel.getDate()}/${kommentar.tidsstämpel.getFullYear()}`;
},
redigera() {
detta.redigering.sms: a = detta.sms: a;
detta.redigering.timestamp = new Date();
detta._emit(“redigera”, detta.redigering);
detta._resetState();
},
skapa() {
detta.skapa.sms: a = detta.sms: a;
detta.skapa.timestamp = new Date();
detta._emit(“skapa”, detta.skapa);
detta._resetState();
},
avbryt() {
detta._resetState();
},
ta bort() {
detta._emit(“ta bort”, detta.redigering);
detta._resetState();
},
_emit(evt, data) {
detta.$roten.$släpper ut(evt, data);
},
_resetState() {
detta.sms: a = null;
detta.redigering = null;
detta.skapar = null;
}
},

monterad() {
detta.$roten.$till (“commentTargetClicked__${detta.- målet.id}`, detta.onTargetClick
);
},

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

Jag vet, jag vet. Lite skrämmande. Men det är i princip bara att göra ett par viktiga saker.

Först ut, hela första delen som ingår i <template> – taggen fastställer markup för en kommentar linköpingiin som kommer att visas på skärmen med ett formulär för att lämna en kommentar. Med andra ord, detta är den HTML-kod som gör att våra kommentarer.

Nästa upp, skriver vi manus som makten sätt våra kommentarer beter sig. Komponenten får full målobjekt som en prop. Det är där kommentarer array och den positionsinformation som lagras.

Då, den magiska. Vi har definierat flera metoder att göra viktiga saker när den utlöses:

  • Lyssnar för ett klick
  • Gör en kommentar i rutan och positioner det där klicket avrättades
  • Fångar användarinmatad data, inklusive användarens namn och kommentar
  • Ger affordances för att skapa, redigera, ta bort, och avbryta en kommentar

Slutligen hanterare för commentTargetClicked händelser som vi såg tidigare är förvaltas inom monterad och beforeDestroy krokar.

Det är värt att notera att roten exempel används som vid bussen. Även om detta tillvägagångssätt är ofta motarbetas, jag bedömde att det var rimligt i detta sammanhang, eftersom de komponenter som inte exponeras offentligt och kan ses som en monolitisk enhet.

Aaaaaaand, vi är redo! Efter lite styling (jag kommer inte att expandera på min tvivelaktiga CSS-kunskaper), vår plugin är redo att ta kommentarer på mål element!

Demo tid!

Live Demo

GitHub Repo

Bekanta dig med mer Vue plugins

Vi tillbringade större delen av detta inlägg att skapa en Vue plugin, men jag vill ge denna full cirkel att anledningen till att vi använder plugins vid alla. Jag har sammanställt en kort lista över extremt populära Vue plugins för att visa upp alla de underbara saker du får tillgång till när du sätter plugins att använda.

  • Vue-router – Om du bygger en enda sida-program, kommer du utan tvekan behöver Vue-router. Som officiell router för Vue, integrerar det djupt med sin kärna för att utföra uppgifter som kartläggning av komponenter och häckande rutter.
  • Vuex – fungerar som en centraliserad butik för alla komponenter i ett program, Vuex är en no-brainer om du vill bygga stora program med hög underhåll.
  • Vee-bekräfta – När en byggnad typisk affärssystem, form validering kan snabbt bli ohanterlig, om de inte hanteras med försiktighet. Vee-validera tar hand om det på ett graciöst sätt. Den använder direktiv, och det är byggt med lokalisering i åtanke.

Jag ska begränsa mig till dessa plugins, men vet att det är många andra som väntar på att hjälpa Vue utvecklare, som dig själv!

Och, hey! Om du inte kan hitta ett plugin som serverar dina behov, du nu har en del praktisk erfarenhet av att utforma en egen plugin. 😀

SHARE
Previous articleKomme i Gang med Vue Plugins
Next articleWordPress.com