Vue + maskinskrevet kopi: En Kamp Laget i Koden Din Editor

0
49

Vue er så varmt akkurat nå, og jeg har tenkt på å gjøre en alvorlig prosjekt med det siden en god stund, så når muligheten dukket opp, jeg hoppet i. Men det var et lite problem — ett av kravene for prosjektet var å skrive det i maskinskrevet kopi. Ved første, jeg var super stresset om hvordan jeg hadde tenkt å noen gang komme i gang på dette combo, men vue-cli gjort det så lett.

Jeg ville lyve hvis jeg sa denne turen var super glatt. Det var frustrasjoner, timer å stirre på skjermen og noen fistbumps med mitt bord, men etter å ha jobbet med Vue + maskinskrevet kopi for over en måned nå, kan jeg si det var verdt det — og hvis jeg hadde å kode en annen app med Vue, jeg ville ikke gjøre det uten maskinskrevet kopi.

Forutsetninger

Denne artikkelen er om sammenkobling Vue og maskinskrevet kopi og forutsetter grunnleggende kjennskap til begge deler. Hvis du ikke har hatt en sjanse til å spille med dem ennå, og er nysgjerrig, Vue har en flott guide, og maskinskrevet kopi docs er et flott sted å starte.

Vi trenger å ha vue-cli installert globalt, slik at vi raskt kan spinne opp Vue prosjektet. Installere vue-cli ved å kjøre følgende kommando i terminal:

npm installere -g @vue/cli

Når vi har det installert, vi er flink til å gå. Hvis du ikke har maskinskrevet kopi installert, trenger vi ikke å gjøre det på forhånd, som vue-cli tar vare på at når du starter et nytt prosjekt, og velg maskinskrevet kopi der.

Komme I Gang

Nå som vi har vue-cli installert, er alt vi trenger å gjøre for å få et prosjekt med Vue + maskinskrevet kopi i gang, er å kjøre vue lage. Når du oppretter et nytt prosjekt, velger maskinskrevet kopi og vi er flink til å gå.

vue skape <app-navn>

Her er resultatet når prosjektet vårt spinner opp:

vue-cli også gir oss mulighet til å velge Babel sammen med maskinskrevet kopi for polyfills, CSS preprocessors, linter, unit testing biblioteker (jeg plukket Spøk, gå Spøk!) sammen med andre config. Du kan også lagre dine valg i en forhåndsinnstilling, for å bruke den senere, for et annet prosjekt.

Her er en oversikt over praktiske spørsmål vil du bli bedt om å konfigurere prosjektet:

En ting jeg vil nevne er at vue-cli 3.0 kommer med et brukergrensesnitt som gjør det enda mer enkelt å opprette et nytt prosjekt. Kjør vue ui i terminal og vue-cli åpner et BRUKERGRENSESNITT der du kan sette opp et nytt prosjekt.

Hva er i Boksen

Etter vue-cli er gjort, får vi en fin katalog strukturen i vår app med alle oppsett allerede har gjort.

  • tsconfig.json: Dette er alle satt opp, og vi kan redigere den slik at den passer våre krav.
  • shims-vue.d.ts: Disse shims er allerede satt opp til å hjelpe maskinskrevet kopi korrekt .vue filer (filer med Én Fil Komponenter) når de er importert.
  • vue-eiendom-dekoratør: Hvis du velger å bruke klasse-stil komponenter, vue-cli legger denne plugin, slik at vi kan bruke alle slags dekoratører. Dette kommer ganske hendig og gjøre koden mer lesbar.
  • Førsteklasses komponenter: Hvis du velger å bruke dem, vue-cli setter scenen for deg. Husk at du fortsatt ville trenge for å registrere ruter kroker slik førsteklasses komponenter kan løse dem.

Sass Oppsett

En ting som jeg trengte for å sette opp og jeg skulle ønske var tatt ut av esken ble delt Sass partials. For å unngå å importere min Sass variabler og mixins i hver komponent, jeg måtte legge dem i vue.config.js. delt.scss er filen for å eksportere alle variabler og mixins som brukes i appen.

Her er der jeg kom med min Sass-konfigurasjon:

chainWebpack: (config) => {
config
.modul
.regelen(‘vue’)
.bruker
.få(‘vue-loader’)
.trykk på(({ lastere, lastere: { scss }, …valg }) => ({
…valg,
lastere: {
…lastere,
scss: [
…scss,
{
loader: ‘sass-ressurser-loader’,
valg: {
ressurser: [
‘./src/stiler/felles.scss’,
],
},
},
],
},
}));

Vue Eiendom Dekoratør

De vue-eiendom-dekoratør pakken inneholder Vue egenskaper og gjør dem tilgjengelig for bruk som dekoratører. I søknaden min, jeg endte opp med bare @Komponent, @Prop, @Se, men det er andre som @Avgir, @Injisere og @ – Modellen, som gjør koden din mye mer detaljert når det brukes i utstrakt grad.

Vuex

Vuex har typings…nuff said! Vuex støtter maskinskrevet kopi til oppstart og ved første, jeg visste ikke engang vet det. Jeg begynte å lete etter riktige måter å kombinere Vuex med maskinskrevet kopi og snublet over Alex Jover Morales’ egghead.io-kurs Vue.js Statlig Styring med Vuex og maskinskrevet kopi. Det hjalp meg å forstå den riktige måten å håndtere Vuex tilstand når du bruker maskinskrevet kopi.

For eksempel:

// handlinger.ts
import { ActionTree } fra ‘vuex’;
import { RootState, ModuleState } fra ‘@/typer’;

const handlinger: ActionTree<ModuleState, RootState> = {
// alle dine handlinger gå her
};

Vuex-klasse

Dette er enda en ting som jeg ikke visste eksisterte da jeg først begynte, men vet skulle ønske jeg hadde funnet det før. Jeg skulle lage getters for nesten alt, men som ikke føles rett. Jeg begynte å lete etter bedre måter å gjøre dette og fant en interessant artikkel av Francesco Vitullo som ryddet opp et par ting for meg. Det er der jeg har funnet ut om vuex-klasse som gir dekoratører for alle vuex mappers.

Så, nå i stedet for å skrive en ny getter for å bruke en eiendel i staten, kunne jeg gjøre dette:

import {
Stat,
} fra ‘vuex-klasse’

@Komponent
eksport klasse MyComp strekker seg Vue {
@Tilstand(tilstand => staten.bar) stateBar
}

Utvikling Erfaring Med VS-Kode

Med maskinskrevet kopi, koding erfaring på VS-Koden er så mye bedre. Det er ingen vei tilbake og tilbake for å sjekke hva som mutasjon typer jeg erklærte i mutasjon-typer.ts fordi VS Koden kan gjenkjenne dem og foreslå riktig som jeg skriver.

Det samme gjelder for endring av tilstand i mutasjoner — med maskinskrevet kopi, redaktøren visste hva min tilstand struktur ser ut som, og foreslår riktig egenskaper.

Hvis du bruker VS-Koden, jeg sterkt anbefaler at du bruker Vetur plugin fordi det gir Vue verktøy og kommer med andre bjeller og fløyter som syntaks utheving (dette fungerer bra med Vue enkelt fil komponenter) og linting rett ut av boksen.

Avsluttende Tanker

Akkurat som alt annet i JavaScript økosystem, Vue + maskinskrevet kopi fortsatt har en lang vei å gå. For eksempel, jeg kunne ikke bruke vuelidate fordi den ikke har typings. Men heldigvis vee-validere gitt en midlertidig løsning, så jeg trengte ikke å gå ned den vanskelige veien for å skrive dem selv.

I konklusjonen, jeg fant utvikling oppleve å bli mye jevnere og VS-Koden er en helt annen dyret når du arbeider med maskinskrevet kopi. Jeg vet egentlig ikke trenger å synge lovsanger av Vue — det er veldig lett å plukke opp og begynne å bygge og lagrer dager prøver å vikle hodet rundt det indre arbeidet i et rammeverk.

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men sikkerhet og sikkerhetskopiering, Markdown-støtte, søk nettstedet, kommentar form, sosiale nettverk-tilkoblinger, og mer!