Vue-CLI


A Vue CLI (Command Line Interface) egy parancssor alapú interfész, melyen keresztül menedzsenletjük a Vuejs környezetben történő fejlesztéseket. Lehetőséget ad a projektek és különböző könyvtárak menedzselésére [5]. Amikor élesre állítjuk az alkalmazásunkat, az összes JavaScript fájlunkat, a CSS stílus fájlokat és az importált könyvtárakat a Webpack egybecsomagolja és optimalizálja számunkra a megfelelő működés érdekében. Továbbá a projektek megvalósításának metodikájának sem szab határt, ugyanazt a projektet meg tudjuk csinálni vue komponensek, TypeScript, SCSS, Pug, a legfrissebb verziójú ECMAScript, stb. Fejlesztői üzemmódban akárhányszor végzünk mentést, a változtatások azonnal lefordítódnak és megjelennek a képernyőnkön. Hogy is működik? Egyenlőre szorítkozzunk a jelenlegi legfrissebb verziójával (3.x.). Egy projekt létrehozásán keresztül bemutatjuk a tényleges működését. Az első lépésként feltelepítjük a Vue CLI legfrissebb változatát. A telepítés minimum követelménye a Node.js 8.9-es verziója és az npm. A feltelepítés után avue create paranccsal új projektet kezdhetünk. Ezt követően választhatunk a gyors (előre konfigurált) és lassú (minden egyes (általunk vagy mások által írt) bővítményt magunk választhatunk ki) létrehozás között. A saját konfigurácionkat mi magunk is elmenthetjük, hogy később újra felhasználhassuk (mint sablon). Akármelyik lehetőséget választottuk, máris megkezdődhet a fejlesztés és véglegesítés. Ha szükségét látjuk, a projektünk funkcionalitásának tárházát kiegészíthetjük utólag is általunk, vagy mások által készített bővítményekkel. Végül indítsuk el az alkalmazást fejlesztői módban az npm run serve paranccsal.

Vue-CLI
> npm install -g @vue/cli
Vue-CLI projekt

Nézzünk rá az újonnan telepített projektünk könyvtár struktúrájára:

> dist  //  az éles üzemmódhoz lefordított html, javascript és css fájlok
> node modules //  az összes telepített könyvtár ebben a mappában helyezkedik el
> public //  az összes olyan fájl, amit a webpack nem dolgoz fel, 
		 //  ebben a mappában helyezkedik el
> src //  az alkalmazás forráskódja ebben a mappában helyezkedik el
	|_ 
		> assets //  az alkalmazással kapcsolatos képek, stíluselemek, 
				 //	 stb ebben a mappában helyezkednek el
		> components //  a forráskódhoz tartozó komponensek ebben 
					 //  a mappában helyezkednek el
		> plugins  //  a forráskódhoz tartozó bővítmények ebben a mappában helyezkednek el
		> views //  több oldalas applikáció esetén a különálló 
			   //  oldalak/nézetek ebben a mappában helyezkednek el        
		App.vue  //  a forráskód gyökér komponense, ami összeköti 
		         //  a többi különálló komponenst
		main.js  //  a fájl, ami kezdeményezi az alkalmazás lerenderelését 
		         //  és betöltődését a DOM-ba
		router.js  //  egyoldalas alkalmazások (single page application) 
		           //  esetén a különálló oldalak/nézetek (mint komponensek) 
				   //  regisztrálásáért és váltásáért felel
		store.js  //  a Vuex keretrendszer egyik fontos eleme, 
				  //  ahol definiálni és szinkronizálni lehet olyan változókat, 
				  //  melyek értékeit az összes regisztrált komponens között 
				  //  szabadon meg lehet osztani
.gitignore  //  olyan fájl, amiben definiálhatunk egy listát, melyeket 
			//  nem szeretnénk ha felkerülnének a verziókezelő színpadára
package.json  //  olyan fájl, amiben fel van jegyezve minden fontos 
			  //  információ ami a projektünkkel kapcsolatos 
			  //  (projekt neve, verziója, leírása, tesztelői és 
			  //  éles üzemmóddal kapcsolatos parancsok definiálása, 
			  //  kulcsszavak, szerző, licensz, repozatórium neve, 
			  //  a telepített könyvtárak neve és verziószáma
package.lock.json
babel.config.js

Nézzünk meg, hogy az alkalmazás hogyan is töltődik be. Elsőként azt láthatjuk, hogy a szükséges "dolgokat" beimportáljuk. Ezt követően a Vue-t lepéldányosítjuk, az argumentumába belekerülnek az importált "dolgok" és megmondjuk a Vue-nak, hogy renderelje le az alkalmazást és töltse be a DOM-ba konkrétan (alapértelmezetten) a ./public/index.html fájlban a <div id="app"></div> -be. Az alatta megfogalmazott <!-- built files will be auto injected --> komment szövege annyit takar, hogy éles üzemmódban (npm run build) a Webpack összecsomagolja az összes fejlesztő üzemmódban kódolt utasítást. Az így kapott HTML fájlokat bármelyik böngészőben megnyitva azt láthatjuk, hogy már nem helyi hálózatról szolgáltatjuk.

Feltételezhetően már felmerült a kedves olvasókban, hogy mik is lehetnek ezek a .vue kiterjesztésű fájlok az src mappában? Nyissunk meg egyet egy kódszerkesztővel és vizsgáljuk meg a felépítését. Azt láthatjuk, hogy három részre tagolódik az implementált kód: <template></template>, <script></script> és <style></style>. A színfalak mögött a Webpack átalakítja ezen a szekciókat JavaScript kóddá, majd exportálja. Az előző példára építkezve bővítsük ki a projektünket komponensek létrehozásával úgy, hogy mindegy komponens egy-egy nézetet valósítson meg és minden egyes nézetet útvonalakkal érjük el. Ezeket a projekt gyökérkönyvtárában található main.js fájlba kell importálni és regisztrálni (globálisan) a Vue.component() metódus segítségével. Az általunk (vagy mások által) definiált komponenseket a következőképpen hívhatjuk meg: <komponens_neve></komponens_neve>, ahol komponens_neve a komponens neve, amivel regisztráltuk. Ebben az esetben az útvonalak kezelését és a nézetek lerendelését nem a szerver intézi, csak a bejövő kéréseket igyekszik teljesíteni és az alkalmazást reprezentáló index.html fájlt szolgáltatni.

Első lépésként telepítsük fel a vue-router könyvtárat (npm install --save vue-router), majd importáljuk be a main.js fájlba. Deklaráljunk egy tömbnyi objektumot, ahol egy-egy objektum (path tulajdonsággal) egy-egy útvonalat reprezentáljon. Az útvonalak alatt az URL DOMAIN utáni részét kell érteni. Ezt követően társítsuk össze a komponenseket az útvonalakkal. Példányosítsuk le a Vuerouter-t a konstruktor függvény meghívásával (new Vuerouter()). A konstruktor függvény vár egy objektumot routes tulajdonsággal. Adjuk át neki a korábban deklarált útvonalak listáját tartalmazó tömböt. Végezetül adjuk át paraméterként a lepéldányosított Vue verziója számára. A soron következő feladatunk az egyes oldalak megjenenítése egy általunk kiválasztott (keretként funkcionáló) oldalon. Ezt az oldalt ezesetben azonosítsuk az App.vue fájllal és a <template></template>-ben deklaráljuk az alábbiakat: <router-view></router-view>.

> npm install -g @vue/cli




Irodalomjegyzék

[1]
Vue.js core team. Vue.js: The Progressive JavaScript Framework. https://vuejs.org, Legutóbb megtekintve: 2019. április 22.
[2]
Vue.js core team. API, Global Config, directive. https://vuex.vuejs.org/vuex.png, Legutóbb megtekintve: 2019. április 22.
[3]
Vue.js core team. API, Global Config, computed. https://vuejs.org/v2/api/#computed, Legutóbb megtekintve: 2019. április 22.
[4]
Vue.js core team. API, Global Config, components. https://vuejs.org/v2/api/#components, Legutóbb megtekintve: 2019. április 22.
[5]
Vue.js core team. Vue-CLI. https://cli.vuejs.org/guide/creating-a-project.html#vue-create, Legutóbb megtekintve: 2019. április 22.
[6]
Vue.js core team. Vue-router. https://router.vuejs.org/guide/#html, Legutóbb megtekintve: 2019. április 22.
[7]
Vue.js core team. Render Functions and JSX. https://vuejs.org/v2/guide/render-function.html, Legutóbb megtekintve: 2019. április 22.
[8]
w3schools core team. JavaScript RegExp Reference. https://www.w3schools.com/jsref/jsref_obj_regexp.asp, Legutóbb megtekintve: 2019. április 22.
[9]
Google Chrome DevTools core team. Chrome DevTools. https://developers.google.com/web/tools/chrome-devtools, Legutóbb megtekintve: 2019. április 22.
[10]
Node.js core team. Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. https://nodejs.org/en/, Legutóbb megtekintve: 2019. április 22.
[11]
NPMJS core team. NPMJS. https://www.npmjs.com, Legutóbb megtekintve: 2019. április 22.
[12]
ExpressJS core team. Express Fast, unopinionated, minimalist web framework for Node.js. https://expressjs.com, Legutóbb megtekintve: 2019. április 22.
[13]
EJS core team. EJS: Embedded JavaScript templating. https://ejs.co, Legutóbb megtekintve: 2019. április 22.
[14]
Olga Filipova. Learning Vue.js 2. Packt Publishing Ltd., Livery Place, 35 Livery Street, Birmingham, B3 2PB, UK, 3, 2016.
[15]
E.F. Codd. A relational Model of Data for Large Shared Data Banks. Communications of the ACM, 13 (6) 1970.
[16]
Papp Edit. Adatbáziskezelés. Booklands 2000 Könyvkiadó Kft., 5600 Békéscsaba, Dr. Becsey Oszkár u. 42., 1, 2004.
[17]
Nemzeti Szakképzési és Felnőttképzési hivatal. Szoftverfejlesztő tanfolyam. https://www.nive.hu, Legutóbb megtekintve: 2019. április 22.
[18]
JavaScript.info core team. JavaScript.info. https://javascript.info/promise-basics, Legutóbb megtekintve: 2019. április 22.
[19]
Craig Buckler. Sitepoint (JavaScript) - Understanding ES6 Modules. https://www.sitepoint.com/understanding-es6-modules/, Legutóbb megtekintve: 2019. április 22.