Vue.js Vodič za programere za početnike: Naučite osnove i koristite ovu strukturu Starter Vue

Vue.js Vodič za programere za početnike


Kad god počnete koristiti nove tehnologije u svom razvojnom toku, možda ćete se osjećati barem zastrašenima. Pogotovo kad u divljini ima bezbroj npm paketa. Miješanje i usklađivanje stvari ponekad može oduzeti puno vremena i truda i obično je frustrirajuće. Tu se pojavljuje sljedeći Vue.js vodič za početnike programere.

Što je Vue.js? Zašto bi ti bilo stalo?

Vue.js ili Vue ukratko, JavaScript je okvir za izgradnju korisničkih sučelja. U usporedbi s drugim okvirima, poput Angularnog ili React-a, Vue je pristupačniji i nema tako strmu krivulju učenja..

Vue je također modularan i omogućuje vam da podijelite svoj kôd na komponente za višekratnu upotrebu. Svaki od njih ima svoju HTML oznaku, CSS i JavaScript kôd.

Koji je opseg ovog Vue.js udžbenika?

Svrha ovog kratkog Vue.js vodiča je pružiti vam skele na kojima možete graditi i eksperimentirati s Vueom. Pogledati ćemo osnovno postavljanje aplikacije Vue unutar nadzorne ploče WordPressa.

(Napomena: U ovom vodiču nećemo vas učiti Vue per se, ali možete nastaviti i naučiti više o okviru iz službeni vodič nakon što ste ovdje postavili projekt – na kojem možete nastaviti eksperimentirati nakon što završimo. Također, preporučujemo neke od najzanimljivijih knjižnica komponenti Vue UI koje proces razvoja čine učinkovitijim.)

Ono što ćemo učiniti je upotreba unaprijed određenog predloška za WordPress dodatke pomoću Vue. Možete ga pronaći u sljedećem GitHub skladištu ako želite dublje pogledati: https://github.com/abaicus/vue-wp-bootstrap.

Vue.js tutorial: Preduvjeti

Nekoliko je stvari koje biste trebali već postaviti na računalo da biste nastavili slijediti ovaj vodič:

Prvo, trebat će vam LAMP stack – možete koristiti XAMPP na Windows ili Mac ili Local by Flywheel na Mac-u, a zatim sami postavite novu lokalnu WordPress instalaciju.

Obavezno ih ima Upravitelj paketa NodeJS (npm) instaliran na vašem računalu. Također ćete trebati instalirati još dva paketa preko terminala – Vue CLI i alat za pokretanje predloška Vue. Ovako:

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

Nakon što instalirate ove dvije ovisnosti, morate promijeniti aktivni direktorij u direktorij wp-sadržaja / dodataka svoje instance za WordPress, a zatim tamo pokrenuti sljedeću naredbu:

$ vue init abaicus / vue-wp-bootstrap my-vue-nadzorna ploča-dodatak

Nakon toga od vas će se zatražiti da odgovorite na neka pitanja u vezi s postavljanjem vašeg projekta.

Za prompt za izgradnju samo idite naprijed i za sada odaberite prvu opciju "Runtime + Compiler: preporučuje se većini korisnika".

Ako želite, možete omogućiti liniju ESLint. Otkrivat će pogreške u povezivanju u vašem projektu, ali ne morate se brinuti o tome trenutno.

Predavanje i vezivanje kuka namijenjeni su provjeri poruka počinjenja i koda prije slanja obveze na GitHub – kako bi sve bilo uredno i lijepo oblikovano.

Nakon što završite, terminal ćete izgledati manje ili više ovako:

Možete ići naprijed i slijediti upute na zaslonu. Promijenite direktorij u novo generirani direktorij dodataka i pokrenite naredbe prikazane u promptu terminala. Tako će se aplikacija pokrenuti i čekati promjene unutar vašeg koda, a Vue kod će prevesti u JavaScript.

Što to radi?

Ne mnogo. Ovo je samo osnovna aplikacija koja prikazuje neke podatke iz pozadine. Nema mnogo Vuea pod haubom. Možete nastaviti na stranicu nadzorne ploče dodataka i aktivirati je. Nova stranica dodati će se u vaš Admin Menu. Kada se pomičete do nje, pronaći ćete stranicu nadzorne ploče s dva niza:

Konstrukcija skela pluga

Pogledajmo strukturu datoteka za novo generirani dodatak. Zanemarit ćemo većinu konfiguracijskih datoteka u ovom Vue.js vodiču kako bismo se mogli usredotočiti na strukturu aplikacije:

Prvo smo dobili datoteku plugin.php, koja je ulazna točka za stvarni dodatak. Evo, imamo glavni Uključiti klase. Tu se uključuju i pokreću glavne komponente aplikacije.

Dalje, tu je datoteka package.json u kojoj su definirane sve ovisnosti i hrpa drugih informacija o projektu. Dio u kojem bi vas mogli zanimati živi pod "skripta" polje. Eto, imate sve naredbe koje možete pokrenuti s prefiksom npm run. Važni, za sada, trebali bi biti npm run dev (koji gradi aplikaciju za razvoj) i npm run build (koje biste trebali pokrenuti nakon što budete spremni implementirati aplikaciju za proizvodnju). Druge naredbe su uz ove dvije ili druge stvari koje u ovom trenutku ne biste trebali brinuti.

Unutar direktorija sadrži tri datoteke:

  • Klasa rest.php trenutno ne radi ništa, ali već imate strukturu za dodavanje svojih RestAPI ruta
  • Predmet.php klasa upravlja stilom i skriptu zadržan. Ovdje je JavaScript datoteka lokalizirana za prosljeđivanje početnih podataka s PHP-a u našu aplikaciju Vue. Trenutno su poslana samo dva teksta, ali možete uključiti sve što želite.
  • Datoteka admin.php je ta koja vodi računa o dodavanju nove stranice na nadzornoj ploči i prikazivanju stvarne stranice dodatka. Primijetit ćete kako se sama aplikacija prikazuje kao dvije prazne oznake unutar funkcije plugin_page (). To je zato što će JavaScript upravljati stvarnim pružanjem aplikacije nakon što se učita.

Unutar direktorija imovine pronaći ćete još četiri direktorija:

  • Src direktorij – izvorne datoteke za našu aplikaciju Vue, o čemu ćemo kasnije razgovarati.
  • Scss direktorij – datoteke u stilu SCSS iz kojih generiramo tablicu CSS stilova.
  • Imenik js – prevedeni kod koji se generira iz naših datoteka u src direktoriju.
  • Css direktorij – stil sastavljen iz SCSS datoteka.

Datoteke src direktorija i datoteke predložaka Vue

Unutar ove mape nalaze se dvije datoteke: main.js i App.vue. Datoteka main.js je ulazna točka za aplikaciju. Priključuje komponentu aplikacije Vue elementu DOM s pripadajućim id-om.

/ * jshint esverzija: 6 * /
import Vue iz ‘vue’
uvoz aplikacije iz ‘./App.vue’

window.addEventListener (‘load’, function () {
novi Vue ({// eslint-onesposobiti-line ne-novi
el: ‘# mvdp-aplikacija’,
komponente: {App},
render: (h) => h (aplikacije)
})
})

Stvarna oznaka aplikacije nalazi se unutar predloška App.vue:

/ * jshint esverzija: 6 * /

{{This.strings.title}}

{{This.strings.description}}

/ * globalni MVDP * /
izvoz zadani {
podaci () {
povratak {
žice: MVDP.strings
}
},
naziv: ‘App.vue’
}

Ispod isječka možete vidjeti da koristimo žice koje smo lokalizirali u klasi Aktiva. Jedna od sjajnih značajki Vuea je ta što je kod komponente lijepo organiziran u predložak, skriptu i stil što olakšava razumijevanje strukture.

To je to, sada imate solidnu početnu točku za sve što želite dalje razvijati s Vue.js! Nadam se da je ovaj Vue.js udžbenik bio od pomoći.

Ne zaboravite se pridružiti našem tečaju o ubrzanju ubrzanja stranice WordPress. Pomoću nekih jednostavnih ispravki možete smanjiti vrijeme učitavanja za čak 50-80%:

Izgled, prezentacija i montaža od strane Karol K.

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