Vue + Typoscript: Een Match Made in Je Code-Editor

0
39

Vue is zo hot op dit moment en ik heb het denken van het doen van een serieus project met het sinds een tijdje, toen de kans dook, stapte ik in. Maar er was een klein probleem — een van de eisen van het project was om het te schrijven met de Schrijfmachine. Ten eerste, ik was super gespannen over hoe ik was van plan om ooit te beginnen op deze combo, maar vue-cli was het zo gemakkelijk.

Ik zou liegen als ik zei dat deze rit was super glad. Er waren de frustraties, de uren staren naar het scherm en sommige fistbumps met mijn tafel, maar na het werken met Vue + Typoscript voor meer dan een maand nu, kan ik zeggen het was de moeite waard en als ik moest code een andere app met Vue, ik zou het niet doen zonder de Schrijfmachine.

Voorwaarden

Dit artikel gaat over de koppeling Vue en de Schrijfmachine en veronderstelt enige basiskennis van beide. Als u nog niet de kans gehad om met ze te spelen en toch nieuwsgierig zijn, Vue heeft een geweldige gids, en de Getypte documenten zijn een geweldige plek om te beginnen.

We moeten vue-cli geïnstalleerd wereldwijd, dus we kunnen snel op gang Vue project. Installeren vue-cli door het volgende commando in de terminal:

npm installeren -g @vue/cli

Als we eenmaal geïnstalleerd, we ‘ re good to go. Als u geen Schrijfmachine geïnstalleerd, hoeven we niet te doen dat van te voren, als vue-cli zorgt dat wanneer je een nieuw project aan en kies de Schrijfmachine.

Aan De Slag

Nu hebben we vue-cli geïnstalleerd, alles wat we moeten doen om een project met Vue + Typoscript begon te lopen vue maken. Tijdens het maken van een nieuw project, kies de Schrijfmachine en we ‘ re good to go.

vue maken <app-naam>

Hier is het resultaat als ons project draait:

vue-cli biedt ons ook de mogelijkheid om te kiezen Babel, samen met de Schrijfmachine voor polyfills, CSS preprocessors, linter, unit testing bibliotheken (ik pakte de Grap, gaat de Grap!) samen met andere config. U kunt zelfs uw keuzes in een preset, om het later te gebruiken voor een ander project.

Hier is een overzicht van de handige vragen die je gesteld worden voor het configureren van het project:

Een ding dat ik zou willen noemen is dat de vue-cli 3.0 wordt geleverd met een gebruiksvriendelijke interface die maakt het nog makkelijker te maken een nieuw project. Voer vue ui in de terminal en vue-cli-hiermee opent u een interface waar u kunt een nieuw project opgezet.

Wat zit er in de Doos

Na vue-cli is gedaan, krijgen we een mooi directory structuur van onze app met alle instellingen al gedaan.

  • standaarden houdt.json: Dit is allemaal opgezet en kunnen we bewerken het aan te passen aan onze eisen.
  • shims-vue.d.ts: Deze shims zijn al ingesteld om te helpen de Schrijfmachine begrijpen .vue-bestanden (een Bestand Onderdelen) wanneer ze worden geïmporteerd.
  • vue-eigendom-decorateur: Als u kiest om het gebruik van klasse-stijl componenten, vue-cli voegt deze plugin zo kunnen we gebruik maken van allerlei decorateurs. Dit is heel handig en de code is beter leesbaar.
  • Klasse componenten: Als u ervoor kiest om ze te gebruiken, vue-cli wordt het podium voor u. Houd in gedachten dat je zou nog steeds nodig hebben om te registreren router haken, zodat klasse componenten kunnen lossen.

Sass Setup

Een ding dat ik nodig had om de set-up en ik wens werd opgenomen uit de doos werd gedeeld Sass partiële protheses. Om te voorkomen dat het importeren van mijn Sass variabelen en mixins in elk onderdeel, ik had ze te laden in vue.config.js. gedeeld.scss is het bestand exporteren van alle variabelen en mixins die worden gebruikt in de app.

Hier is waar ik landde met mijn Sass configuratie:

chainWebpack: (config) => {
config
.module
.regel(‘vue’)
.toepassingen
.get(‘vue-loader’)
.tik op(({ wielladers, shovels: { scss }, …opties }) => ({
…opties
laders: {
…laders,
scss: [
…scss,
{
loader: ‘sass-middelen-loader’
opties: {
bronnen: [
‘./src/styles/gedeeld.scss’,
],
},
},
],
},
}));

Vue Eigendom Decorateur

De vue-eigendom-decorateur pakket bloot Vue eigenschappen en maakt ze beschikbaar voor gebruik als decorateurs. In mijn toepassing, eindigde ik met @Component, @Prop, @Horloge, maar er zijn anderen zoals @Uitstoten, @Injecteren en @Model, dat maakt je code nog veel meer uitgebreide wanneer op grote schaal gebruikt.

Vuex

Vuex heeft typeringen…nuff said! Vuex ondersteunt de Schrijfmachine te starten en, op het eerste, ik wist niet eens. Ik begon te kijken voor de juiste manieren te combineren Vuex met de Schrijfmachine en struikelde over Alex Jover Morales’ egghead.io cursus Vue.js State Management met Vuex en Typoscript. Het heeft mij geholpen te begrijpen van de juiste manier van het beheren van Vuex staat bij het gebruik van de Schrijfmachine.

Bijvoorbeeld:

// acties.ts
importeren { ActionTree } van ‘vuex’;
importeren { RootState, ModuleState } ‘@/types’;

const acties: ActionTree<ModuleState, RootState> = {
// alle acties gaan hier
};

Vuex-klasse

Dit is nog een ander ding dat ik niet wist dat bestond toen ik voor het eerst begon, maar weten wou dat ik gevonden had het eerder. Ik was het creëren van getters voor bijna alles, maar dat voelde niet goed. Ik ging op zoek naar betere manieren om dit te doen en vond een interessant artikel door Francesco Vitullo die opgeruimd, een paar dingen voor mij. Dat is waar ik te vinden over vuex-klasse die voorziet in decorateurs voor alle vuex kaartenmakers.

Zo, nu in plaats van het schrijven van een nieuwe getter voor het eenvoudig openen van een onroerend goed in staat, ik zou dit kunnen doen:

importeren {
Staat
} van ‘vuex-klasse’

@Onderdeel
export klasse MyComp breidt Vue {
@Toestand(state => staat.bar) stateBar
}

Ervaring in ontwikkeling Met de VS-Code

Met de Schrijfmachine, de codering ervaring op VS-Code is zo veel beter. Er is geen weg terug en weer om te controleren welke mutatie soorten verklaarde ik in mutatie-types.ts omdat de VS-Code kunt ze herkennen en suggereren juiste zijn, als ik typ.

Hetzelfde geldt voor het wijzigen van state in mutaties — met de Schrijfmachine, de uitgever wist wat mijn staat structuur eruit ziet en stelt de juiste eigenschappen.

Als u gebruikmaakt van VS-Code, ik raden u sterk aan de Vetur plugin omdat Vue gereedschap en komt met andere toeters en bellen zoals syntax highlighting (dit werkt geweldig met Vue één bestand componenten) en pluizen uit de doos.

Laatste Gedachten

Net als alles in de JavaScript-ecosysteem, Vue + Typoscript heeft nog een lange weg te gaan. Bijvoorbeeld, kon ik geen gebruik maken van vuelidate omdat het geen typeringen. Maar gelukkig vee-valideren voorzien in een tijdelijke oplossing, zodat ik niet naar beneden te gaan om de moeilijke weg van het schrijven van die van mezelf.

In conclusie, ik vond de ervaring in de ontwikkeling te veel soepeler en VS-Code is een totaal ander beest wanneer u werkt met de Schrijfmachine. Ik heb het niet echt nodig om te zingen tot eer van Vue — het is erg makkelijk om op te pakken en beginnen met het bouwen en slaat dagen proberen wikkel je hoofd om de innerlijke werking van een kader.

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!