En Vue.js-vejledning til nybegynderudviklere: Lær det grundlæggende og brug denne startvue-struktur

En Vue.js-vejledning til nybegynderudviklere: Lær det grundlæggende og brug denne startvue-struktur

En Vue.js-vejledning til nybegynderudviklere: Lær det grundlæggende og brug denne startvue-struktur
СОДЕРЖАНИЕ
02 июня 2020

Vue.js Tutorial for begyndereudviklere


Hver gang du begynder at bruge nye teknologier i din udviklingsstrøm, kan du føle dig mindst en smule skræmt. Især når der er et utal af npm-pakker derude i naturen. At blande og matche ting kan undertiden tage en masse tid og kræfter, og det er normalt frustrerende. Det er her følgende Vue.js-tutorial til nybegynderudviklere kommer i spil.

Hvad er Vue.js? Hvorfor skulle du være interesseret?

Vue.js eller Vue for short er en JavaScript-ramme til opbygning af brugergrænseflader. Sammenlignet med andre rammer, som vinkelformet eller reagerer, er Vue mere tilgængelig og har ikke så stejl læringskurve.

Vue er også modulopbygget og giver dig mulighed for at opdele din kode i genanvendelige komponenter. Hver af dem har deres egen HTML-markering, CSS og JavaScript-kode.

Hvad er omfanget af denne Vue.js-tutorial?

Formålet med denne korte Vue.js-tutorial er at give dig nogle stilladser, som du kan bygge og eksperimentere med Vue på. Vi vil tage et kig på en grundlæggende opsætning af en Vue-app i WordPress-instrumentbrættet.

(Bemærk; Vi vil ikke lære dig Vue i sig selv i denne vejledning, men du kan gå videre og lære mere om rammerne fra officiel guide efter du har konfigureret projektet her – som du kan fortsætte med at eksperimentere, når vi er færdige. Vi anbefaler også nogle af de mest interessante Vue UI-komponentbiblioteker, der gør udviklingsprocessen mere effektiv.)

Hvad vi skal gøre er at bruge en foruddefineret skabelon til WordPress-plugins ved hjælp af Vue. Du kan finde det i følgende GitHub-lager, hvis du vil se et dybere kig: https://github.com/abaicus/vue-wp-bootstrap.

Vejledning til Vue.js: Forudsætninger

Der er et par ting, som du allerede skulle have konfigureret på din computer for at fortsætte med at følge denne vejledning:

For det første har du brug for en LAMP-stak – du kan bruge XAMPP på Windows eller Mac eller Local by Flywheel på Mac og derefter opsætte dig en ny lokal WordPress-installation.

Sørg for, at du har NodeJS-pakkehåndtering (npm) installeret på din maskine. Du bliver også nødt til at installere yderligere to pakker via terminalen – Vue CLI og initialiseringsværktøjet til Vue-skabelon. Ligesom:

$ npm-installation -g @ vue / cli
$ npm-installation -g @ vue / cli-init

Når du har installeret disse to afhængigheder, skal du ændre det aktive bibliotek til din lokale WordPress-instans ‘wp-content / plugins-bibliotek og derefter køre følgende kommando der:

$ vue init abaicus / vue-wp-bootstrap my-vue-dashboard-plugin

Dernæst bliver du bedt om at besvare nogle spørgsmål vedrørende opsætningen af ​​dit projekt.

For Build-prompten skal du bare gå videre og vælge den første mulighed nu "Runtime + Compiler: anbefales til de fleste brugere".

Du kan aktivere ESLint-linter, hvis du vil. Det vil registrere eventuelle fnugefejl i dit projekt, men du behøver ikke nødvendigvis at bekymre dig om dette lige nu.

Forpligtelseslo og forhåndsforbindelseskroge er beregnet til at kontrollere dine forpligtelsesmeddelelser og koden, før du sender en forpligtelse til GitHub – for at holde alt ryddig og pænt formateret.

Du ender med at en terminal ser mere eller mindre sådan ud, når du er færdig:

Du kan gå foran og følge instruktionerne på skærmen. Skift kataloget til det nyoprettede plugin-bibliotek, og kør de kommandoer, der vises i terminalprompt. Dette vil få din ansøgning i gang og vente på ændringer i din kode, og den transpilerer Vue-koden til JavaScript.

Hvad gør den?

Ikke meget. Dette er kun et grundlæggende program, der viser nogle data fra backend. Ikke meget Vue under hætten. Du kan gå videre til siden Plugins Dashboard og aktivere den. Det vil tilføje en ny side i din administratormenu. Når du navigerer til det, vil du finde en betjeningsside med to strenge:

Stilladsets struktur

Lad os se på filstrukturen for det nyligt genererede plugin. Vi vil ignorere de fleste af konfigurationsfilerne i denne Vue.js-tutorial, så vi kan fokusere på applikationens struktur:

Først har vi plugin.php-filen, som er indgangspunktet for det faktiske plugin. Her har vi det vigtigste Plugin klasse. Det er her de vigtigste komponenter i applikationen er inkluderet og kørt.

Dernæst er der pakken.json-filen, hvor alle afhængigheder og en masse andre projektinfo er defineret. Den del, hvor du muligvis er interesseret, bor under "scripts" Mark. Der har du alle de kommandoer, du kan køre med præfikset npm run. De vigtigste, for nu, skal være npm run dev (som bygger applikationen til udvikling) og npm run build (som du skal køre, når du er klar til at implementere din app til produktion). De andre kommandoer støder op til disse to eller udfører andre ting, som du ikke behøver at bekymre dig om i øjeblikket.

Inde i biblioteket inkluderer, er der tre filer:

  • Rest.php-klassen gør ikke noget i øjeblikket, men du har allerede en struktur til at tilføje dine RestAPI-ruter
  • Klasse klassen asset.php håndterer stil og manuskriptudskrivning. Her er JavaScript-filen lokaliseret for at videregive startdata fra PHP til vores Vue-app. I øjeblikket er der kun to tekster sendt, men du kan medtage alt hvad du ønsker.
  • Filen admin.php er den, der tager sig af at tilføje en ny side i instrumentbrættet og gengive den faktiske pluginside. Du vil bemærke, at selve appen gengives, ligesom to tomme tags inde i funktionen plugin_page (). Det skyldes, at JavaScript håndterer den aktuelle gengivelse af applikationen, når den er indlæst.

Inde i oversigten over aktiver vil du finde yderligere fire mapper:

  • Src-biblioteket – kildefilerne til vores Vue-app, som vi vil tale om senere.
  • Scss-biblioteket – de SCSS-stilfiler, som vi genererer CSS-stilarket fra.
  • Js-biblioteket – den transpilerede kode, der genereres fra vores filer i src-biblioteket.
  • Css-biblioteket – den kompilerede stil fra SCSS-filer.

Src-biblioteket og Vue-skabelonfiler

Inde i dette bibliotek er der to filer: main.js og App.vue. Main.js-filen er indgangspunktet for applikationen. Den knytter Vue-app-komponenten til DOM-elementet med det tilhørende id.

/ * jshint esversion: 6 * /
import Vue fra ‘vue’
importer app fra ‘./App.vue’

windows.addEventListener (‘load’, funktion () {
ny Vue ({// eslint-disable-line no-new
el: ‘# mvdp-app’,
komponenter: {App},
render: (h) => h (App)
})
})

Den faktiske applikationsmarkup er inde i app.vue-skabelonen:

/ * jshint esversion: 6 * /

{{This.strings.title}}

{{This.strings.description}}

/ * global MVDP * /
eksport standard {
data () {
Vend tilbage {
strenge: MVDP.strings
}
},
navn: ‘App.vue’
}

Du kan se inden i uddraget ovenfor, at vi bruger strengene, vi lokaliserede i klassen Aktiver. En af de store egenskaber ved Vue er, at komponentkoden er pænt organiseret i skabelon, script og stil, hvilket gør det let at forstå strukturen.

Det er det, du har nu et solidt udgangspunkt for hvad du end vil videreudvikle med Vue.js! Jeg håber, at denne Vue.js-tutorial har været nyttig.

Glem ikke at deltage i vores nedbrudskursus om at fremskynde dit WordPress-sted. Med nogle enkle rettelser kan du reducere din indlæsningstid med endda 50-80%:

Layout, præsentation og redigering af Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector