Vue.js-i juhendaja algajatele arendajatele: õppige põhitõdesid ja kasutage seda algversioonistruktuuri

Juhend Vue.js algajatele arendajatele


Kui hakkate oma arenguvoos uusi tehnoloogiaid kasutama, võite end vähemalt natuke hirmutada. Eriti kui looduses on tohutult npm pakke. Asjade segamine ja sobitamine võib mõnikord võtta palju aega ja vaeva ning on tavaliselt pettumust valmistav. Siin tuleb mängu järgmine Vue.jsi õpetus algajatele arendajatele.

Mis on Vue.js? Miks sa peaksid hoolima??

Vue.js või Lühidalt Vue on JavaScripti raamistik kasutajaliideste loomiseks. Võrreldes teiste raamistikega, näiteks Nurga või Reaktsiooniga, on Vue paremini ligipääsetav ja sellel pole nii kõver õppekõver.

Vue on ka modulaarne ja võimaldab teil jagada oma koodi korduvkasutatavateks komponentideks. Igal neist on oma HTML-i märgistus, CSS ja JavaScripti kood.

Milline on selle Vue.js õpetuse ulatus?

Selle lühikese Vue.js-õpetuse eesmärk on pakkuda teile tellinguid, millele saate ehitada ja Vue-ga katsetada. Vaatame Vue rakenduse põhiseadistusi WordPressi juhtpaneelil.

(Märkus. Me ei õpeta teile juhendis Vue per se), kuid võite minna edasi ja õppida raamistiku kohta lähemalt ametlik juhend pärast seda, kui olete siin projekti üles seadnud – mille peal saate jätkata eksperimente ka pärast seda, kui oleme valmis. Samuti soovitame mõnda kõige huvitavamat Vue UI komponendi teeki, mis muudavad arendusprotsessi efektiivsemaks.)

Mida me kavatseme teha, on kasutada eelmääratletud malli WordPressi pistikprogrammide jaoks, kasutades Vue’i. Kui soovite põhjalikumalt uurida, leiate selle järgmisest GitHubi hoidlast: https://github.com/abaicus/vue-wp-bootstrap.

Juhend Vue.js: Eeltingimused

Selle juhendi järgimiseks peaksite juba mõned arvutis olema seadistatud:

Esiteks on teil vaja LAMP-virna – saate kasutada XAMPP-i Windowsis või Macis või Local by Flywheel Macis ja seejärel seada endale uus kohalik WordPressi install.

Veenduge, et teil oleks NodeJS paketihaldur (npm) teie arvutisse installitud. Samuti peate terminali kaudu installima veel kaks paketti – Vue CLI ja Vue malli lähtestamise tööriist. Meeldib nii:

$ npm installimine -g @ vue / cli
$ npm installige -g @ vue / cli-init

Pärast nende kahe sõltuvuse installimist peate aktiivse kataloogi muutma kohaliku WordPressi eksemplari wp-content / plugins kataloogiks ja käivitama seal järgmise käsu:

$ vue init abaicus / vue-wp-bootstrap my-vue-armatuurlaua pistikprogramm

Järgmisena palutakse teil vastata mõnele küsimusele, mis puudutavad teie projekti seadistamist.

Kiiresti ehitamiseks liikuge lihtsalt edasi ja valige nüüd esimene valik "Runtime + Compiler: soovitatav enamikule kasutajatele".

Saate soovi korral lubada ESLinti liini. See tuvastab kõik teie projektis olevad vigu puudutavad vead, kuid te ei pea praegu selle pärast tingimata muretsema.

Commit Lint ja Commit Lint on ette nähtud selleks, et enne kohustuse saatmist GitHubile kontrollida teie sidumisteateid ja koodi – hoida kõik korras ja kenasti vormindatud.

Lõppkokkuvõttes näete terminali enam-vähem niimoodi, kui olete valmis:

Võite minna edasi ja järgida ekraanil kuvatavaid juhiseid. Muutke kataloog äsja loodud pluginate kataloogiks ja käivitage terminali viipas kuvatud käsud. See käivitab teie rakenduse ja käivitub, oodates muudatusi teie koodis ja teisendab Vue-koodi JavaScripti.

Mida see teeb?

Mitte palju. See on lihtsalt põhirakendus, mis kuvab taustaprogrammi andmeid. Mitte palju Vue kapoti all. Võite minna edasi pluginate juhtpaneeli lehele ja selle aktiveerida. See lisab teie haldurimenüüsse uue lehe. Sellele navigeerimisel leiate kahe stringiga juhtpaneeli lehe:

Pistiktellingute struktuur

Vaatame äsja loodud pistikprogrammi failistruktuuri. Ignoreerime enamikku selle Vue.js-i õpetuse konfiguratsioonifailidest, et saaksime keskenduda rakenduse struktuurile:

Esiteks on meil plugin.php-fail, mis on tegeliku pistikprogrammi sisenemispunkt. Siin on meil peamine Sisse panema klass. See on koht, kus rakenduse põhikomponendid on kaasatud ja käitatud.

Järgmisena on fail package.json, kus on määratletud kõik sõltuvused ja hunnik muud projektiinfot. See osa, millest võite huvitatud olla, elab programmi all "skriptid" põld. Seal on teil kõik käsud, mida saate käivitada npm käivituse eesliitega. Tähtsad peaksid praegu olema npm run dev (mis loob rakenduse arendamiseks) ja npm run build (mida peaksite käivitama, kui olete valmis oma rakenduse tootmiseks kasutusele võtma). Muud käsud asuvad nende kahe kõrval või teevad muid asju, mille pärast ei peaks te praegu muretsema.

Sisaldava kataloogi sees on kolm faili:

  • Rest.php klass ei tee praegu midagi, kuid teil on juba RestAPI marsruutide lisamiseks vajalik struktuur
  • Varat.php klass tegeleb stiili ja skripti sisenemisega. Siin lokaliseeritakse JavaScripti fail, et edastada lähteandmed PHP-st meie Vue rakendusele. Praegu on ainult kaks teksti saadetud, kuid saate lisada kõike, mida soovite.
  • Fail admin.php hoolitseb juhtpaneeli uue lehe lisamise ja tegeliku pistikprogrammi lehe renderdamise eest. Pange tähele, et rakendus ise on muudetud funktsiooni plugin_page () sisemuses kahe tühjaks sildiks. Põhjus on see, et JavaScriptiga hakatakse pärast rakenduse tegelikku renderdamist hakkama saama.

Varade kataloogist leiate veel neli kataloogi:

  • Src kataloog – meie Vue rakenduse lähtefailid, millest räägime hiljem.
  • Scss kataloog – SCSS stiilifailid, millest genereerime CSS stiililehe.
  • Js kataloog – ümberasustatud kood, mis genereeritakse meie failidest src kataloogis.
  • Css-kataloog – kompileeritud stiil SCSS-failidest.

Src-kataloog ja Vue-mallifailid

Selles kataloogis on kaks faili: main.js ja App.vue. Fail main.js on rakenduse sisenemispunkt. See lisab rakenduse Vue komponendi vastava ID-ga DOM-i elemendile.

/ * jshinti esversioon: 6 * /
import Vue ‘vue’st
impordi rakendus kaustast ./App.vue

window.addEventListener (‘laadimine’, funktsioon () {
uus Vue ({// eslint-keela-line pole uus
el: ‘# mvdp-app’,
komponendid: {rakendus},
renderdama: (h) => h (rakendus)
})
})

Rakenduse tegelik märgistus asub mallil App.vue:

/ * jshinti esversioon: 6 * /

{{this.strings.title}}

{{this.strings.description}}

/ * ülemaailmne MVDP * /
eksport vaikimisi {
andmed () {
tagastama {
stringid: MVDP.strings
}
},
nimi: ‘App.vue’
}

Ülaltoodud lõigust näete, et kasutame stringe, mille lokaliseerisime klassis Varad. Üks Vue suurepäraseid omadusi on see, et komponendi kood on korralikult jaotatud mallideks, skriptideks ja stiilideks, mis lihtsustab struktuuri mõistmist.

See selleks, teil on nüüd kindel lähtepunkt kõigele, mida soovite Vue.js-iga edasi arendada! Loodan, et sellest Vue.js-i õpetusest on abi olnud.

Ärge unustage liituda meie WordPressi saidi kiirendamise kursusega. Mõne lihtsa parandusega saate laadimisaega vähendada isegi 50–80%:

Kujundus, esitlus ja toimetamine Karol K poolt.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map