Vue.js-opetusohjelma aloittelijoille: Opi perusteet ja käytä tätä Start Vue -rakennetta

Vue.js-opetusohjelma aloittelijoille


Aina kun käytät uutta tekniikkaa kehityskehityksessäsi, saatat tuntea olevansa ainakin hieman pelotettu. Varsinkin kun luonnossa on lukemattomia npm-paketteja. Asioiden sekoittaminen ja sovittaminen voi joskus viedä paljon aikaa ja vaivaa, ja se on yleensä turhauttavaa. Tässä on seuraava Vue.js-opetusohjelma aloittelijoille.

Mikä on Vue.js? Miksi sinun pitäisi välittää?

Vue.js tai Lyhyt Vue on JavaScript-kehys käyttöliittymien rakentamiseen. Verrattuna muihin kehyksiin, kuten Angular tai React, Vue on tavoitettavissa olevampi eikä siinä ole yhtä jyrkkä oppimiskäyrä.

Vue on myös modulaarinen ja antaa sinun jakaa koodisi uudelleenkäytettäviin komponentteihin. Jokaisella heistä on oma HTML-merkintä, CSS ja JavaScript-koodi.

Mikä on tämän Vue.js-opetusohjelman soveltamisala?

Tämän lyhyen Vue.js-opetusohjelman tarkoituksena on tarjota sinulle joitain rakennustelineitä, joihin voit rakentaa ja kokeilla Vuea. Aiomme tarkastella Vue-sovelluksen perusasetuksia WordPress-kojelaudan sisällä.

(Huomaa; emme opeta teille arvonlisää itsellesi tässä oppaassa, mutta voit mennä eteenpäin ja oppia lisää puitteista virallinen opas kun olet perustanut projektin täällä – jonka avulla voit jatkaa kokeilua, kun olemme valmistuneet. Suosittelemme myös joitain mielenkiintoisimmista Vue UI -komponenttikirjastoista, jotka tekevät kehitysprosessista tehokkaampaa.)

Aiomme käyttää ennalta määritettyä mallia WordPress-laajennuksiin Vue-sovelluksen avulla. Löydät sen seuraavasta GitHub-arkistosta, jos haluat syvemmälle: https://github.com/abaicus/vue-wp-bootstrap.

Vue.js-opetusohjelma: Edellytykset

On joitain asioita, jotka sinun olisi jo asennettava tietokoneellesi jatkaaksesi tämän oppaan seuraamista:

Ensinnäkin tarvitset LAMP-pinon – voit käyttää XAMPP: tä Windowsissa tai Macissa tai Local by Flywheel Macissa ja sitten asettaa itsellesi uuden paikallisen WordPress-asennuksen.

Varmista, että sinulla on NodeJS-paketinhallinta (npm) asennettu koneeseesi. Sinun on myös asennettava kaksi muuta pakettia terminaalin kautta – Vue CLI ja Vue-mallin alustustyökalu. Niin kuin:

$ npm asenna -g @ vue / cli
$ npm asentaa -g @ vue / cli-init

Kun olet asentanut nämä kaksi riippuvuutta, sinun on vaihdettava aktiivinen hakemisto paikallisen WordPress-ilmentymän wp-content / plugins -hakemistoon ja suoritettava seuraava komento siellä:

$ vue init abaicus / vue-wp-bootstrap my-vue-kojelaudan laajennus

Seuraavaksi sinua pyydetään vastaamaan joihinkin projektisi asennusta koskeviin kysymyksiin.

Suorita kehotettaessa vain mennä eteenpäin ja valita nyt ensimmäinen vaihtoehto "Runtime + Compiler: suositellaan useimmille käyttäjille".

Voit ottaa ESLint-linterin käyttöön, jos haluat. Se havaitsee projektissa mahdolliset linting-virheet, mutta sinun ei tarvitse välttämättä huolehtia tästä juuri nyt.

Commit Lint ja Pre-Commit Hook on tarkoitettu tarkistamaan sitoumussanomasi ja koodi ennen kuin lähetät sitoumuksen GitHubille – pitääksesi kaikki siistinä ja hienosti muotoillut.

Loppujen lopuksi terminaali näyttää enemmän tai vähemmän tällaiselta, kun olet valmis:

Voit mennä eteenpäin ja seurata näytön ohjeita. Vaihda hakemisto äskettäin luodun laajennuksen hakemistoon ja suorita komennot, jotka näkyvät terminaalikehotteessa. Tämä saa sovelluksesi käyttöösi ja odottaa muutoksia koodissa ja siirtää Vue-koodin JavaScriptiin.

Mitä se tekee?

Ei paljon. Tämä on vain perussovellus, joka näyttää joitain tietoja taustalta. Ei paljon Vue-konepellin alla. Voit siirtyä Plugins Dashboard -sivulle ja aktivoida se. Se lisää uuden sivun hallintavalikkoosi. Kun navigoit siihen, löydät kojetaulun sivun, jossa on kaksi merkkijonoa:

Plugin-telineiden rakenne

Katsotaanpa juuri luodun laajennuksen tiedostorakennetta. Aiomme sivuuttaa suurimman osan tämän Vue.js-opetusohjelman konfigurointitiedostoista, jotta voimme keskittyä sovelluksen rakenteeseen:

Ensinnäkin meillä on plugin.php-tiedosto, joka on varsinaisen laajennuksen lähtökohta. Täällä meillä on tärkein Kytkeä luokka. Tässä sovelluksen pääkomponentit sisältyvät ja niitä käytetään.

Seuraavaksi on paketti.json-tiedosto, jossa määritetään kaikki riippuvuudet ja joukko muita projektitietoja. Se osa, josta saatat olla kiinnostunut, elää "skriptejä" ala. Siellä sinulla on kaikki komennot, joita voit suorittaa npm run -etunnuksella. Tärkeitä toistaiseksi pitäisi olla npm run dev (joka rakentaa sovelluksen kehittämiseen) ja npm run build (joka pitäisi suorittaa, kun olet valmis ottamaan sovelluksesi käyttöön tuotantoa varten). Muut komennot ovat näiden kahden vieressä tai tekevät muita asioita, joista sinun ei tarvitse huolehtia tällä hetkellä.

Sisällyttävän hakemiston sisällä on kolme tiedostoa:

  • Rest.php-luokka ei tee mitään tällä hetkellä, mutta sinulla on jo rakenne lisätäksesi RestAPI-reitit
  • Asset.php-luokka käsittelee tyylin ja käsikirjoittamisen. Täällä JavaScript-tiedosto lokalisoidaan siirtämään aloitustiedot PHP: stä Vue-sovellukseemme. Tällä hetkellä vain kaksi tekstiä lähetetään, mutta voit sisällyttää mitä haluat.
  • Admin.php-tiedosto on se, joka huolehtii uuden sivun lisäämisestä kojelautaan ja renderoinnin varsinaisesta laajennussivusta. Huomaat, että itse sovellus renderoidaan kahtena tyhjänä tunnisteena plugin_page () -toiminnon sisällä. Tämä johtuu siitä, että JavaScript käsittelee sovelluksen todellisen renderoinnin sen lataamisen jälkeen.

Omaisuushakemistosta löydät vielä neljä hakemistoa:

  • Src-hakemisto – Vue-sovelluksemme lähdetiedostot, joista aiomme puhua myöhemmin.
  • Scss-hakemisto – SCSS-tyylitiedostot, joista luot CSS-tyylitaulukon.
  • Js-hakemisto – siirretty koodi, joka luodaan src-hakemistossa olevista tiedostoista.
  • Css-hakemisto – koottu tyyli SCSS-tiedostoista.

Src-hakemisto ja Vue-mallitiedostot

Tämän hakemiston sisällä on kaksi tiedostoa: main.js ja App.vue. Main.js-tiedosto on sovelluksen lähtökohta. Se liittää Vue-sovelluskomponentin DOM-elementtiin vastaavalla tunnuksella.

/ * jshint-esversio: 6 * /
tuo Vue ‘vue’
Tuo sovellus tiedostosta ‘./App.vue’

window.addEventListener (‘lataa’, toiminto () {
uusi Vue ({// eslint-Disable-line no-new
el: ‘# mvdp-app’,
komponentit: {App},
renderointi: (h) => h (App)
})
})

Todellinen sovelluksen merkintä on App.vue-mallissa:

/ * jshint-esversio: 6 * /

{{This.strings.title}}

{{This.strings.description}}

/ * globaali MVDP * /
vie oletus {
tiedot () {
palauta {
jouset: MVDP.kielet
}
},
nimi: ‘App.vue’
}

Yllä olevan katkelman sisällä voi nähdä, että käytämme omaisuusluokassa lokalisoimia merkkijonoja. Yksi Vue: n hienoista ominaisuuksista on, että komponentin koodi on järjestetty siististi malliin, skriptiin ja tyyliin, mikä helpottaa rakenteen ymmärtämistä.

Se on se, sinulla on nyt vankka lähtökohta kaikelle, mitä haluat kehittää edelleen Vue.js: n kanssa! Toivon, että tämä Vue.js-opetusohjelma on ollut hyödyllinen.

Älä unohda liittyä kaatumiskurssillemme WordPress-sivustosi nopeuttamiseksi. Joillakin yksinkertaisilla korjauksilla voit vähentää latausaikaa jopa 50–80%:

Asettelun, esityksen ja muokkaamisen 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