Vue.js oktatóprogram kezdő fejlesztőknek: Tanulja meg az alapokat és használja ezt a kezdő Vue struktúrát

Vue.js oktatóprogram kezdő fejlesztőknek: Tanulja meg az alapokat és használja ezt a kezdő Vue struktúrát

Vue.js oktatóprogram kezdő fejlesztőknek: Tanulja meg az alapokat és használja ezt a kezdő Vue struktúrát
СОДЕРЖАНИЕ
02 июня 2020

Vue.js bemutató kezdő fejlesztők számára


Amikor elkezdi új technológiák alkalmazását a fejlesztési folyamatában, legalább egy kicsit megfélemlítettnek érzi magát. Különösen akkor, ha számtalan npm csomag van a vadonban. A dolgok keverése és összehangolása néha sok időt és energiát igényel, és általában bosszantó. Ez az, ahol a következő Vue.js oktatóprogram kezdő fejlesztők számára kerül játékba.

Mi a Vue.js? Miért érdekelne??

A Vue.js vagy a rövid Vue egy JavaScript keretrendszer a felhasználói felületek felépítéséhez. Más keretekhez viszonyítva, mint például a Angular vagy a React, a Vue jobban megközelíthető, és nem rendelkezik olyan meredek tanulási görbével..

A Vue szintén moduláris, és lehetővé teszi a kód újrafelhasználható összetevőkre bontását. Mindegyikük rendelkezik saját HTML jelöléssel, CSS és JavaScript kóddal.

Mi a Vue.js bemutató hatóköre??

A rövid Vue.js oktatóprogram célja, hogy néhány állványt biztosítson Önnek, amelyeken felépítheti és kipróbálhatja a Vue-t. Vizsgáljuk meg a Vue alkalmazás alapbeállítását a WordPress irányítópultján.

(Megjegyzés: Ebben az útmutatóban nem ön szerint tanítunk Önnek Vue-t, de továbbléphet és megismerheti a keretrendszert a hivatalos útmutató miután itt beállította a projektet – amelyen folytathatja a kísérletezést, miután készen vagyunk. Javasoljuk továbbá a legérdekesebb Vue UI komponens könyvtárakat, amelyek hatékonyabbá teszik a fejlesztési folyamatot.)

Mit fogunk csinálni, egy előre definiált sablont használunk a Word használatával, a Vue segítségével. A következő GitHub-lerakatban találhatja meg, ha mélyebben át szeretné tekinteni: https://github.com/abaicus/vue-wp-bootstrap.

Vue.js bemutató: Előfeltételek

Van néhány dolog, amelyet már be kellett állítania a számítógépén, hogy továbbra is kövesse ezt az útmutatót:

Először is szüksége lesz egy LAMP veremre – használhatja az XAMPP-t Windows-on vagy Mac-en, vagy a Local by Flywheel-t Mac-en, majd beállíthatja magának egy friss helyi WordPress-telepítést.

Győződjön meg róla, hogy rendelkezik a NodeJS csomagkezelő (npm) a számítógépére telepítve. A terminálon keresztül további két csomagot kell telepítenie – a Vue CLI és a Vue sablon inicializáló eszközét. Tetszik:

$ npm telepítés -g @ vue / cli
$ npm telepítés -g @ vue / cli-init

Miután telepítette ezt a két függőséget, meg kell változtatnia az aktív könyvtárat a helyi WordPress példány wp-content / plugins könyvtárához, majd futtatnia kell a következő parancsot:

$ vue init abaicus / vue-wp-bootstrap my-vue-műszerfal-plugin

Ezután felkérést kap arra, hogy válaszoljon néhány kérdésre a projekt beállításával kapcsolatban.

A Build prompt esetén csak folytassa, és válassza ki az első lehetőséget "Runtime + Compiler: a legtöbb felhasználó számára ajánlott".

Ha szeretné, engedélyezheti az ESLint linter alkalmazást. Ez felismeri a projektben szereplő bevilágítási hibákat, de most nem feltétlenül kell ezzel aggódnia.

A Commit Lint és a Commit Lift előtti hookok arra irányulnak, hogy ellenőrizzék a kötelező üzeneteket és a kódot, mielőtt elküldik a kötelezettségvállalást a GitHub-nak – hogy minden rendben legyen és szépen formázva legyen..

A végén egy terminál néz ki, amely többé-kevésbé így néz ki, miután kész:

Mehet tovább, és követheti a képernyőn megjelenő utasításokat. Változtassa meg a könyvtárat az újonnan létrehozott beépülő modul könyvtárává, és futtassa a terminál képernyőn megjelenő parancsokat. Ezzel az alkalmazás fut és fut, várva a kódon belüli változásokat, és a Vue kódot átterjeszti a JavaScriptre.

Mit csinal?

Nem sok. Ez csak egy alapvető alkalmazás, amely bizonyos adatokat jelenít meg a háttérről. Nem sok Vue a motorháztető alatt. Mehet a Plugins Dashboard oldalra, és aktiválhatja azt. Új oldalt fog hozzáadni a Rendszergazda menübe. A navigálás után meg fog találni egy irányítópult oldalt két karakterlánccal:

A plugin állványszerkezet

Vessen egy pillantást az újonnan létrehozott bővítmény fájlszerkezetére. Hagyjuk figyelmen kívül hagyni a Vue.js oktatóprogramban található legtöbb konfigurációs fájlt, hogy az alkalmazás szerkezetére összpontosítsunk:

Először megkaptuk a plugin.php fájlt, amely a tényleges plugin belépési pontja. Itt van a fő Csatlakoztat osztály. Ez az, ahol az alkalmazás fő alkotóelemei szerepelnek és futnak.

Következő lépésként ott van a package.json fájl, ahol az összes függőség és egy csomó más projektinformáció van meghatározva. Az a rész, amelyben érdekli lehet, a "szkriptek" terület. Itt minden olyan parancs van, amelyet az npm futtatás előtaggal futtathat. A legfontosabb egyelőre az npm run dev (amely a fejlesztési alkalmazást készíti) és az npm run build (amelyet akkor futtasson, ha készen áll az alkalmazás telepítésére a termeléshez). A többi parancs e kettő mellett helyezkedik el, vagy más dolgot végez, amelyek miatt nem kell aggódnia.

A benne lévő könyvtáron belül három fájl található:

  • A rest.php osztály jelenleg nem tesz semmit, de már van szerkezete a RestAPI útvonalak hozzáadásához.
  • Az asset.php osztály kezeli a stílusot és a szkriptet. Itt a JavaScript fájl lokalizálódik, hogy a kiindulási adatokat a PHP-ből a Vue alkalmazásba továbbítsuk. Jelenleg csak két szöveget küldünk el, de bármit belefoglalhat.
  • Az admin.php fájl gondoskodik egy új oldal felvételéről az irányítópulton, és az aktuális beépülő oldal megjelenítéséről. Észre fogja venni, hogy maga az alkalmazás ugyanúgy jelenik meg, mint két üres címke a plugin_page () függvényben. Ennek oka az, hogy a JavaScript kezeli az alkalmazás tényleges megjelenítését a betöltés után.

Az eszközkönyvtárban további négy könyvtárat talál:

  • Az src könyvtár – a Vue alkalmazás forrásfájljai, amelyekről később beszélni fogunk.
  • Az scss könyvtár – az SCSS stílusú fájlok, amelyekből előállítjuk a CSS stíluslapot.
  • A js könyvtár – az átültetett kód, amelyet az src könyvtár fájljainkból generálunk.
  • A css könyvtár – az SCSS fájlokból összeállított stílus.

Az src könyvtár és a Vue sablon fájlok

Ezen a könyvtáron belül két fájl található: main.js és App.vue. A main.js fájl az alkalmazás belépési pontja. Csatolja a Vue app összetevőt a DOM elemhez a megfelelő azonosítóval.

/ * jshint-esverzió: 6 * /
importáljon vue-t ‘vue’ -ből
importálja az alkalmazást a ‘./App.vue’

window.addEventListener (‘betöltés’, function () {
new Vue ({// eslint-Disable-Line no-new
el: ‘# mvdp-app’,
összetevők: {App},
teszi: (h) => h (App)
})
})

A tényleges alkalmazásjelölés az App.vue sablonban található:

/ * jshint-esverzió: 6 * /

{{This.strings.title}}

{{This.strings.description}}

/ * globális MVDP * /
alapértelmezett exportálás {
adatok () {
Visszatérés {
húrok: MVDP.strings
}
},
név: ‘App.vue’
}

A fenti kivonatban láthatja, hogy az Eszközök osztályában lokalizált húrokat használjuk. A Vue egyik legfontosabb tulajdonsága, hogy az összetevő kódja szépen sablonba, szkriptbe és stílusba rendezve megkönnyíti a szerkezet megértését.

Ennyi, most van szilárd kiindulási pontja annak, amit tovább szeretne fejleszteni a Vue.js segítségével! Remélem, hogy ez a Vue.js oktatóprogram hasznos volt.

Ne felejtsd el csatlakozni a WordPress-webhely felgyorsításának összeomlási tanfolyamához. Néhány egyszerű javítással akár 50-80% -kal csökkentheti a betöltési időt:

Elrendezés, bemutató és szerkesztés: K Karol.

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