szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:vue|< Vue]]

====== Vue CLI ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021
  * [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: http://szit.hu

===== A Vue CLI gyorskezdés =====

  vue create pr01

A következő varázsló menüjében válasszon a nyíl billentyűkkel,
majd "Enter" billentyűvel menjen tovább.

  - Válasszuk a "Manually select features" lehetőséget.
  - Verzió választás
  - Jellemzők: Legyen kijelölve "Babel" és a Linter/Formatter
  - Válasszunk lintert: "Eslint with error prevention only"
  - Mikor induljon a linter: "Lint on save"
  - Konfiguráció kezelése: "In dedicated config files"
  - Végül nyugtázzuk a választásokat "y" billentyűvel.


A script elkészíti a projekt vázát, és telepíti a függőségeket.


A Vue CLI-ről több információ:
  * https://cli.vuejs.org/


<code>
projekt01/
  |-node_modules/
  |-public/
  |  |-favicon.ico
  |  `-index.html
  |-src/
  |  |-assets/
  |  |  `-logo.png
  |  |-components/
  |  |  `-HelloWorld.vue
  |  |-App.vue
  |  `-main.js
  |-bable.config.js
  |-package.json
  |-package-lock.json
  `-README.md
</code>


  * .browserslistrc - Milyen böngészőre legyen optimalizálva.
  * .eslintrc.js - A linter szabályok helye
  * .gitignore - A git számára megmondja mit nem kell követni.
  * babel.config.js - A modern JavaScript kódot régebbi, több böngésző kompatibilis kóddá alakítja.
  * public - statikus assets fájlok helye
    * favicon.ico - Az alkalmazás favicon állománya.
    * index.html - Az alkalmazás sablonállománya.
  * src - Az Vue alkalmazás magja.
    * main.js - Az alkalmazás belépési pontja.
    * App.vue - A Vue alkalmazás legfelső szintű komponense.
    * componets/ - Komponensek helye
    * assets/ - Statikus fájlok helye, mint képek, CSS, stb.

Más keretrendszerek arra ösztönzik a fejlesztőt, hogy
külön válasszák a sablont, a logikát és a stílust. A Vue
ezzel ellentétben egyetlen fájlban helyezi el ezeket.


Nyissuk meg a App.vue fájlt. Láthatjuk, hogy három részből áll:
  * <template>
  * <script> 
  * <style>

Megjegyzés:
A Pug sablon szintaxisát szeretné használni:
  <template lang="pug">

A <script> tagek között regisztrálva van HelloWorld.vue komponens,
amiben szerepel a component tulajdonságnál a "HelloWorld".
A komponenseket importálni és regisztrálni kell a használathoz.

Ha TypeScript szintaxist szeretnénk használni be kell állítani:
  <script lang="ts">


A <style> elem tartalmazza a stílusokat. Itt is beállítható más
stílus nyelv:
  <style lang="scss">

===== Futtatás =====

  npm run serve

vagy:
  yarn serve

Az alkalmazás elérhető a következő címen:
  http://localhost:8080/


===== Változtatások =====

Töröljük a logót kiírató sort:
  <img alt="Vue logo" src="./assets/logo.png">

A böngészőben eltűnik a logó.

Most töröljük a <HelloWorld> elemet.
  <HelloWorld msg="Welcome to Your Vue.js App"/>

Most hibajelzést látunk a böngészőben és a szervert
indító parancssorban, mivel nem használjuk a 
regisztrált komponenst.


Töröljük a component tulajdonságból a "HelloWorld" 
regisztrációt:

<code>
  components: {
    
  }
</code>

Majd törüljük az importálást is:
  import HelloWorld from './components/HelloWorld.vue'

Még mindig hibaüzenet látunk mert valamilyen gyermek elem
szükséges a <template> elemben.

Készítsünk egy div és egy h1 elemet:
<code html>
<div>
    <h1>Valami</h1>
</div>
</code>

Most újra hibamentesnek kell lenni és a böngészőben
a Valami meg kell jelenjen.


===== Komponens hozzáadása =====

Hozza létre a projekt01/src/componets könyvtárban az employee.vue
állományt. Tartalma:

<code>
<template>

</template>
<script>
  export default {};
</script>
</code>

A template elembe tegyünk egy div elemet, benne 
a jelölőnézetet és egy feliratot.

<code vue>
    <input type="checkbox" id="employee" />
    <label for="employee">Fekete Péter</label>
</code>


A teljes employee.vue tartalma:
<code vue>
<template>
  <div>
    <input type="checkbox" id="employee" />
    <label for="employee">Fekete Péter</label>
  </div>
</template>

<script>
  export default {};
</script>
</code>