Vue + Maskin: En Match Made in Din Kod Redaktör

0
38

Vue är så het just nu och jag har funderat på att göra ett seriöst projekt med det sedan ett bra tag, så när möjligheten dök upp, jag hoppade i. Men det fanns ett litet problem — ett av kraven för projektet var att skriva på Maskin. Vid första, jag var super stressad över hur jag skulle någonsin komma igång på denna kombo, men vue-cli gjort det så lätt.

Jag skulle ljuga om jag sa att denna resa var super smidigt. Det var frustration, timmar av att stirra på skärmen och några fistbumps med mitt bord men efter att ha arbetat med Vue + Maskin för över en månad nu, jag kan säga att det var värt det och om jag var tvungen att koden för en annan app med Vue, jag skulle inte göra det utan Maskin.

Förutsättningar

Denna artikel handlar om att para ihop Vue och Maskin och förutsätter vissa grundläggande kunskaper i båda. Om du inte har haft en chans att spela med dem ännu och är nyfikna, Vue har en bra guide, och TypeScript-docs är ett bra ställe att börja.

Vi måste ha vue-cli installerade världen över, så att vi snabbt kan snurra upp Vue projektet. Installera vue-cli genom att köra följande kommando i terminalen:

npm install-g @vue/cli

När vi har det installerat, vi är bra att gå. Om du inte har Maskin installerad, vi behöver inte göra det i förväg, som vue-cli tar hand om det när du startar ett nytt projekt och välja Maskin där.

Komma Igång

Nu när vi har vue-cli installerad, allt vi behöver göra för att få ett projekt med Vue + Maskin igång är att köra vue skapa. När du skapar ett nytt projekt, välj Maskin och vi är bra att gå.

vue skapa <programnamn>

Här är resultatet när vårt projekt snurrar upp:

vue-cli ger oss också möjlighet att välja Babel tillsammans med Maskin för polyfills, CSS förbehandling, linter, enhetstestning bibliotek (jag plockade Skämt, gå Skämt!) tillsammans med andra config. Du kan även spara dina val i ett preset, för att använda det senare för ett annat projekt.

Här är en genomgång av de praktiska frågor får du uppmanas att konfigurera projektet:

En sak som jag skulle vilja nämna är att vue-cli 3.0 levereras med ett användarvänligt gränssnitt som gör det ännu mer enkelt att skapa ett nytt projekt. Kör vue ui i terminalen och vue-cli öppnar ett gränssnitt där du kan lägga upp ett nytt projekt.

Vad finns i Lådan

Efter vue-cli är gjort, får vi en fin katalog struktur av vår app med alla de inställningar som redan gjorts.

  • tsconfig.json: Här är alla ställa upp och vi kan redigera den för att passa våra behov.
  • shims-vue.d.ts: passringar är redan inrättats för att hjälpa till maskinskriven text, förstå .vue filer (Enstaka Fil Komponenter) när de importeras.
  • vue-egendom-dekoratör: Om du väljer att använda klass-stil komponenter, vue-cli lägger detta plugin så vi kan använda alla typer av dekoratörer. Detta kommer ganska praktiskt och göra koden mer lättläst.
  • Klass komponenter: Om du väljer att använda dem, vue-cli sätter scenen för dig. Tänk på att du fortfarande skulle behöva registrera routern krokar så att klass komponenter kan lösa dem.

Sass Setup

En sak som jag behövde för att ställa upp och jag önskar ingick ur lådan var delad Sass deltonerna. För att undvika att importera min Sass variabler och mixins i varje del, jag var tvungen att ladda in dem i vue.config.js. delad.scss är fil exportera alla variabler och mixins som används i appen.

Här är där jag landade med min Sass konfiguration:

chainWebpack: (config) => {
config
.modul
.regeln(‘vue’)
.använder
.get(‘vue-loader’)
.tryck på(({ lastare, lastmaskiner: { scss }, …alternativ }) => ({
…alternativ,
lastare: {
…lastare,
scss: [
…scss,
{
loader: ‘sass-resurser-loader’,
alternativ: {
resurser: [
‘./src/styles/delat.scss’,
],
},
},
],
},
}));

Vue Egendom Dekoratör

De vue-egendom-dekoratör paket exponerar Vue egenskaper och gör dem tillgängliga för användning som inredare. I min ansökan, jag slutade upp med bara @Komponent, @Prop, @Titta på, men det finns andra som @Avger @Spruta och @Modellen, som gör att din kod mycket mer detaljerad när det används i stor utsträckning.

Vuex

Vuex har typningar…nuff said! Vuex stöder Maskin för att starta upp och, vid första, jag visste inte ens det. Jag började leta efter ett lämpligt sätt att kombinera Vuex med maskinskriven text och snubblat på Alex Jover Morales’ egghead.io kurs på Vue.js Statlig Förvaltning med Vuex och Maskin. Det hjälpte mig att förstå det korrekta sättet att hantera Vuex tillstånd när du använder Maskin.

Till exempel:

// åtgärder.ts
import { ActionTree } från “vuex’;
import { RootState, ModuleState } ‘@/ – typer’;

const åtgärder: ActionTree<ModuleState, RootState> = {
// alla era handlingar går här
};

Vuex-klass

Detta är ännu en sak som jag inte visste fanns när jag började, men vet önskar att jag hade hittat den tidigare. Jag skapar getter för nästan allt, men det kändes inte rätt. Jag började leta efter bättre sätt att göra detta och hittade en intressant artikel av Francesco Vitullo som klarats upp ett par saker för mig. Det var där jag fick reda på vuex-klass som ger inredare för alla vuex kartografer.

Så nu istället för att skriva ett nytt getter för att helt enkelt få åtkomst till en fastighet i staten, att jag kunde göra detta:

import {
Staten,
} från “vuex-klass”

@Komponent
export klass MyComp sträcker sig Vue {
@Tillstånd(state => staten.bar) stateBar
}

Erfarenhet av utveckling Med VS-Kod

Med maskinskriven text, erfarenhet av kodning på VS-Kod är så mycket bättre. Det är ingen som går fram och tillbaka för att kolla vad mutation typer som jag förklarade i-mutation-typer.ts eftersom VS Kod kan känna igen dem och föreslå rätt och kära som jag skriver.

Det samma gäller för ändring av tillstånd i-mutationer — med maskinskriven text, redaktör visste vad min staten strukturen ser ut och föreslår rätt egenskaper.

Om du använder VS Kod, jag rekommenderar starkt att du använder den Vetur plugin eftersom det ger Vue verktyg och levereras med andra klockor och visselpipor som syntax-markering (detta fungerar bra med Vue enkel-fil komponenter) och fibersläpp direkt ur lådan.

Slutliga Tankar

Precis som allt annat i JavaScript ekosystem, Vue + Maskin fortfarande har en lång väg att gå. Till exempel, jag kunde inte använda vuelidate eftersom den inte har typningar. Men tack och lov vee-förutsatt att validera en lösning, så jag inte måste gå den svåra vägen för att skriva dessa själv.

Sammanfattningsvis, jag hittade utvecklingen upplevelse att vara mycket smidigare och VS-Kod är ett helt annat djur när du arbetar med maskinskriven text. Jag behöver verkligen inte sjunga lov Vue — det är mycket lätt att plocka upp och börja bygga och sparar dagar försöker att svepa huvudet runt det inre arbetet i en ram.

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sociala nätverk, och mycket mer!