Aan de Slag met Vue Plugins

0
25

In de afgelopen maanden heb ik veel geleerd over de Vallei. Van het bouwen van zoekmachine vriendelijke spa ‘ s om te knutselen killer blogs of spelen met overgangen en animaties, heb ik geëxperimenteerd met het kader grondig.

Maar er is een ontbrekende stuk in mijn leren: plugins.

De meeste mensen werken met Vue ofwel het gaat om het vertrouwen op plugins als onderdeel van hun workflow of zullen zeker kruis paden met plugins ergens langs de weg. Wat ook het geval, ze zijn een geweldige manier om het benutten van bestaande code, zonder constant te schrijven vanaf nul.

Velen van u hebben waarschijnlijk gebruikt jQuery en zijn gewend aan het gebruik van (of in!) plugins om iets uit carrousels en modals te reageren video ‘ s en type. We zijn in feite over hetzelfde praten hier met Vue plugins.

Dus, wil je er één maken? Ga ik neem aan dat je het knikken met je hoofd zo kunnen we onze handen vuil te maken samen met een stap-voor-stap handleiding voor het schrijven van een custom Vue plugin.

Eerst een beetje context…

Plugins zijn niet iets specifiek voor Vue en — net als jQuery — vindt u dat er een breed scala aan plug-ins die veel verschillende dingen te doen. Per definitie, zij geven aan dat een interface wordt geboden om voor uitbreidbaarheid.

Messing belasting: ze zijn een manier om de stekker globale functies in een app en verlengen ze voor uw gebruik.

De Vue documentatie heeft betrekking plugins in detail en biedt een uitstekende lijst van de categorieën die plugins vallen over het algemeen in:

  1. Voeg enkele globale methoden of eigenschappen.
  2. Het toevoegen van een of meer globale activa: – richtlijnen/filters/overgangen, enz.
  3. Voeg een aantal opties door global mixin.
  4. Voeg wat Vue exemplaar methoden door ze te koppelen aan Vue.prototype.
  5. Een bibliotheek die een API van haar eigen, terwijl op hetzelfde moment het injecteren van een combinatie van het bovenstaande.

OK, OK. Genoeg prelude. Laten we wat code schrijven!

Wat we maken

Bij Spektrum, Snipcart de moeder van het agentschap, onze ontwerpen gaan door een proces van goedkeuring, als ik zeker ben dat is het typische bij de meeste andere winkels en bedrijven. We laten een klant om opmerkingen en suggesties te doen voor de ontwerpen zoals ze ze dus uiteindelijk krijgen we groen licht om verder te gaan en het bouwen van de zaak.

We gebruiken over het algemeen InVision voor dit alles. Het commentaar systeem is een essentieel onderdeel in InVision. Het laat mensen op een deel van het ontwerp en een reactie achterlaten voor de medewerkers direct op de plaats waar die feedback zinvol is. Het is vrij rad.

Zo cool als InVision is, denk ik dat we hetzelfde doen onszelf met een beetje Vue magie en komen met een plugin die iedereen kan gebruiken.

Het goede nieuws hier is dat ze dat niet intimiderend. Een basiskennis van de Vue is alles wat je nodig hebt om te beginnen prutsen met plugins meteen.

Stap 1. De voorbereiding van de codebase

Een Vue-plugin bevat een installatie methode heeft twee parameters:

  1. De wereldwijde Vue object
  2. Een object waarin de gebruiker gedefinieerde opties

Het afvuren van een Vue-project is super eenvoudig, dankzij de Vue CLI 3. Zodra je dat hebt geïnstalleerd, voert u het volgende bij de opdrachtprompt:

$ vue maken vue-commentaar-overlay
# Beantwoorden paar vragen
$ cd vue-commentaar-overlay
$ npm uitgevoerd dienen

Dit geeft ons de klassieke “Hallo Wereld” beginnen moeten we crank uit een test app die onze plugin te gebruiken.

Stap 2. Het maken van de plugin directory

Onze plug-in heeft om ergens te wonen in het project, dus maken we een map aan waarin we kunnen proppen al onze werken, dan is het navigeren door onze command line naar de nieuwe map:

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

Stap 3: Haak van de standaard bedrading

Een Vue-plugin is in principe een object met een installatie-functie die wordt uitgevoerd wanneer u de toepassing met het omvat het met Vue.gebruik().

Het installeren functie ontvangt de wereldwijde Vue-object als parameter en een van de opties object:

// src/plugins/CommentsOverlay/index.js
//
export standaard {
installeren(vue, kiest){
console.log(‘Installeren van de CommentsOverlay plugin!’)
// Plezier zal ook hier gebeuren
}
}

Nu, laat de stekker van dit in onze “Hallo Wereld” test app:

// src/main.js
importeren Vue van ‘vue’
importeren App ‘./App.vue’
importeren CommentsOverlay uit ‘./plugins/CommentsOverlay’ // importeren van de plugin

Vue.gebruik(CommentsOverlay) // zet de plugin te gebruiken!

Vue.config.productionTip = false

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

Stap 4: ondersteuning voor opties

We willen de plugin te configureren. Dit zal toestaan dat iemand het te gebruiken in hun eigen app om dingen aanpassen. Het maakt ook onze plugin veelzijdiger.

We maken de opties van het tweede argument van het installeren van de functie. We maken van de standaard opties die de basis werking van de plugin, d.w.z. hoe het werkt bij geen optie aangepast is opgegeven:

// src/plugins/CommentsOverlay/index.js

const optionsDefaults = {
// Haalt de huidige ingelogde gebruiker, dat is het plaatsen van een reactie
commenterSelector() {
terug {
id: null,
fullName: ‘Anoniem’,
initialen: ‘–‘,
e-mail: null
}
},
data: {
// Hash object van alle elementen die commentaar
doelen: {},
onCreate(gemaakt) {
deze.doelen[gemaakt.targetId].opmerkingen.push(gemaakt)
},
onEdit(editted) {
// Dit is uiteraard niet nodig
// Het is er om te laten zien wat er gedaan kan worden in de terugkoppeling van een externe oproep
laat commentaar = dit.doelen[editted.targetId].opmerkingen
opmerkingen.splice(opmerkingen.indexOf(editted), 1, editted);
},
onRemove(verwijderd) {
laat commentaar = dit.doelen[verwijderd.targetId].opmerkingen
opmerkingen.splice(opmerkingen.indexOf(verwijderd), 1);
}
}
}

Dan kunnen we samen de opties die doorgegeven naar de install functie op de top van deze standaard instellingen:

// src/plugins/CommentsOverlay/index.js

export standaard {
installeren(vue, kiest){
// Merge argument opties in opties standaard
const options = { …optionsDefaults, …kiest }
// …
}
}

Stap 5: het Maken van een exemplaar voor het commentaar te laag

Een ding dat u wilt vermijden met deze plugin is het hebben van de DOM en stijlen interfereren met de app is geïnstalleerd. Voor het minimaliseren van de kans dat dit gebeurt, is één manier om te gaan is het maken van de plugin leven in een andere root-Vue instantie, buiten de app is onderdeel van boom.

Voeg het volgende toe aan het installeren van de functie:

// src/plugins/CommentsOverlay/index.js

export standaard {
installeren(vue, kiest){

// Maak een plugin root Vue exemplaar
const root = new Vue({
data: { doelen: opties.de gegevens.doelen },
render: createElement => createElement(CommentsRootContainer)
})

// Mount root Vue exemplaar op de nieuwe div-element toegevoegd aan het lichaam
root.$mount(document.lichaam.appendChild(document.createElement(‘div’)))

// Inschrijven gegevens mutatie handlers op root exemplaar
root.$op(‘maken’, options.de gegevens.onCreate)
root.$op(‘edit’ (bewerken-opties.de gegevens.onEdit)
root.$op(‘verwijder’, opties.de gegevens.onRemove)

// Maak de wortel exemplaar beschikbaar op alle onderdelen
vue.prototype.$commentsOverlay = root

}
}

Essentieel bits in het fragment hierboven:

  1. De app woont in een nieuwe div-aan het einde van het lichaam.
  2. De event handlers opgegeven in de opties object zijn aangesloten op de overeenkomende gebeurtenissen op de root-exemplaar. Dit zal het gevoel aan het einde van de tutorial, belofte.
  3. De $commentsOverlay eigenschap toegevoegd aan Vue ‘ s prototype beschrijft het root-exemplaar naar alle Vue onderdelen in de applicatie.

Stap 6: Maak een aangepaste richtlijn

Tot slot moeten we een manier voor apps met behulp van de plugin om het te vertellen welk element zal de opmerkingen functionaliteit ingeschakeld. Dit is een zaak voor een custom Vue richtlijn. Sinds plugins hebben toegang tot het wereldwijde Vue object, ze kunnen het definiëren van nieuwe richtlijnen.

Onze naam opmerkingen ingeschakeld, en het gaat als volgt:

// src/plugins/CommentsOverlay/index.js

export standaard {
installeren(vue, kiest){

// Inschrijven aangepaste richtlijn tha stelt in zijn commentaar op de elementen
vue.richtlijn (“comments-enabled’, {
bind(el, bindend) {

// Voeg deze doelstelling vermelding in de root van de instantie gegevens
root.$set(
root.doelen
bindend.waarde
{
id: bindend.waarde
opmerkingen: [],
getRect: () => el.getBoundingClientRect(),
});

el.addEventListener(‘klik’, (evt) => {
root.$stoten(`commentTargetClicked__${bindend.value}`, {
id: uuid(),
commenter: opties.commenterSelector(),
clientX: evt.clientX,
clientY: evt.clientY
})
})
}
})
}
}

De richtlijn doet twee dingen:

  1. Het voegt haar doel om de wortel van de instantie gegevens. De sleutel gedefinieerd is bindend.waarde. Het biedt consumenten de mogelijkheid te geven hun eigen ID voor de doel elementen, zoals zo : <img v-commentaar-enabled=”imgFromDb.id” src=”imgFromDb.src” />.
  2. Het registreert een klik op de gebeurtenis-handler op het target element dat, op zijn beurt, straalt een evenement op de root aanleg voor dit specifieke doel. Zullen We terug naar hoe om te gaan met het later op.

Het installeren van de functie is nu compleet! Nu kunnen we overgaan tot het commentaar functionaliteit en componenten te maken.

Stap 7: Vaststellen van een “Opmerkingen Root-Container” component

We maken een CommentsRootContainer en gebruik het als de root component van de plug-UI. Laten we een kijkje nemen op:

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

<sjabloon>
<div>
<commentaar-overlay
v-for=”doel-in-doelstellingen”
:target=”doel –
:key=”doel.id”>
</reacties-overlay>
</div>
</template>

<script>
importeren CommentsOverlay uit “./CommentsOverlay”;

export standaard {
onderdelen: { CommentsOverlay },
berekend: {
doelen() {
retourneren.$root.doelstellingen;
}
}
};
</script>

Wat is hier aan te doen? We hebben in principe gemaakt van een wrapper die het bedrijf van een andere component die we heb nog om te maken: CommentsOverlay. U kunt zien waar dat onderdeel wordt ingevoerd in het script en de waarden die worden gevraagd in het wrapper-sjabloon (doel en doelgroep.id). Let op hoe de doelgroep berekend eigendom is afgeleid van de wortel van het onderdeel gegevens.

Nu, de overlay onderdeel is waar de magie gebeurt. Krijg aan het!

Stap 8: Maak magie met een “Opmerkingen Overlay” component

OK, ik ben over om te gooien een hoop code op je, maar we zullen er zeker om te wandelen door het:

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

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

<div class=”comments-overlay__container” v-for=”commentaar in het doel.toelichting” :key=”comment.id” :style=”getCommentPostition(reactie)”>
<button class=”comments-overlay__indicator” v-als=”bewerken != reactie” @klik=”onIndicatorClick(reactie)”>
{{ comment.reageerder.initialen }}
</button>
<div v-anders class=”comments-overlay__formulier”>
<p>{{ getCommentMetaString(commentaar) }}</p>
<textarea ref=”tekst” v-model=”text” />
knop <@klik=”edit” :disabled=”!text”>Opslaan</button>
knop <@klik=”annuleren”>Annuleren</button>
knop <@klik=”verwijderen”>Verwijderen</button>
</div>
</div>

<div class=”comments-overlay__formulier” v-als=”dit.het creëren van” :style=”getCommentPostition(deze.maken)”>
<textarea ref=”tekst” v-model=”text” />
knop <@klik=”creëren” :disabled=”!text”>Opslaan</button>
knop <@klik=”annuleren”>Annuleren</button>
</div>

</div>
</template>

<script>
export standaard {
rekwisieten: [‘target’],

gegevens() {
terug {
tekst: null,
bewerken: null,
het maken van: null
};
},

methoden: {
onTargetClick(payload) {
deze._resetState();
const rect = dit.doel.getRect();

deze.het maken van = {
id: laadvermogen.id,
targetId: dit.doel.id,
commenter: laadvermogen.reageerder,
ratioX: (laadvermogen.clientX – rect.links) / rect.breedte
ratioY: (laadvermogen.clientY – rect.top) / rect.hoogte
};
},
onIndicatorClick(reactie) {
deze._resetState();
deze.text = reactie.tekst;
deze.bewerken = reactie;
},
getCommentPostition(reactie) {
const rect = dit.doel.getRect();
const x = reactie.ratioX <em> rect.breedte + rect.links;
const y = reactie.ratioY <em> rect.hoogte + rect.top;
terug { left: `${x}px`>, bovenaan: `${y}px` };
},
getCommentMetaString(reactie) {
return `${
commentaar.reageerder.fullName
} – ${comment.tijdstempel.getMonth()}/${comment.tijdstempel.getDate()}/${comment.tijdstempel.getFullYear()}`;
},
bewerken() {
deze.bewerken.text = dit.tekst;
deze.bewerken.timestamp = new Date();
deze._emit(“edit”, dit.bewerking);
deze._resetState();
},
create() {
deze.maken.text = dit.tekst;
deze.maken.timestamp = new Date();
deze._emit(“maken”.maken);
deze._resetState();
},
annuleren() {
deze._resetState();
},
verwijderen() {
deze._emit(“verwijderen”.bewerking);
deze._resetState();
},
_emit(evt, data) {
.$root.$stoten(evt, data);
},
_resetState() {
deze.text = null;
deze.bewerken = null;
deze.maken = null;
}
},

gemonteerd() {
.$root.$op(`commentTargetClicked__${dit.doel.id}`, dit.onTargetClick
);
},

beforeDestroy() {
.$root.$uit(`commentTargetClicked__${dit.doel.id}`, dit.onTargetClick
);
}
};
</script>

Ik weet het, ik weet het. Een beetje ontmoedigend zijn. Maar het is eigenlijk alleen het doen van een paar belangrijke dingen.

Eerste off, het hele eerste deel opgenomen in de <template> – tag bepaalt de opmaak voor een reactie popover die wordt weergegeven op het scherm met een formulier voor het indienen van een reactie. In andere woorden, dit is de HTML-opmaak dat maakt onze opmerkingen.

Next up, we schrijven de scripts die de macht van de manier waarop onze opmerkingen zich gedragen. De component ontvangt het volledige object als een prop. Dit is waar de opmerkingen array en de positionering van de informatie is opgeslagen.

Dan is de magie. We hebben gedefinieerd verschillende methoden die belangrijke dingen wanneer geactiveerd:

  • Luistert voor een klik
  • Maakt een vakje voor opmerkingen en posities waar de klik was uitgevoerd
  • Vangt de gebruiker verstrekte gegevens, waaronder de naam van de gebruiker en de reactie
  • Biedt affordances maken, bewerken, verwijderen, en een reactie annuleren

Ten slotte, de handler voor de commentTargetClicked evenementen die we eerder al zagen wordt beheerd binnen de gemonteerde en beforeDestroy haken.

Het is vermeldenswaard dat de wortel van het exemplaar wordt gebruikt als de gebeurtenis bus. Zelfs als deze aanpak wordt vaak ontmoedigd, ik achtte het redelijk, in deze context, aangezien de onderdelen niet in het openbaar bloot en kan gezien worden als een monolithische eenheid.

Aaaaaaand, we zijn er helemaal klaar voor! Na een beetje styling (ik zal niet uitbreiden op mijn dubieuze CSS vaardigheden), de plugin is er klaar voor om gebruikers commentaar op de target-elementen!

Demo tijd!

Live Demo

GitHub Repo

Kennismaken met meer Vue plugins

We brachten het grootste deel van deze post het maken van een Vue-plugin, maar ik wil dit volledige cirkel om de reden dat wij gebruik maken van plugins. Ik heb samengesteld een korte lijst van de zeer populaire Vue plugins showcase van alle goede dingen die u toegang tot bij de samenstelling van plug-ins te gebruiken.

  • Vue-router – Als je je losse pagina ‘ s, applicaties, u zult zonder twijfel moet Vue-router. Als de officiële router voor Vue, het integreert diep met haar kern taken als mapping onderdelen en nesten routes.
  • Vuex – Dienen als een centraal archief voor alle componenten in een toepassing, Vuex is een no-brainer als u wilt bouwen van grote apps met hoge onderhoudskosten.
  • Vee-valideren – Bij de bouw van de typische line-of-business applicaties, formulier validatie kan snel onhandelbaar als het niet met zorg behandeld. Vee-valideren verzorgt het allemaal in een sierlijke manier. Het maakt gebruik van de richtlijnen, en het is gebouwd met lokalisatie in het achterhoofd.

Ik zal me beperken tot deze plugins, maar weet dat er vele anderen wachten om te helpen Vue ontwikkelaars, zoals jezelf!

En, hey! Als u niet kunt vinden een plugin die dient uw exacte wensen, u hebt nu een aantal hands-on ervaring met het vervaardigen van een aangepaste invoegtoepassing. 😀