# 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.

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>. A példa itt próbálható ki.