Vue CLI

• Szerző: Sallai András
• Copyright © Sallai András, 2021
• CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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.

1. Válasszuk a „Manually select features” lehetőséget.
2. Verzió választás
3. Jellemzők: Legyen kijelölve „Babel” és a Linter/Formatter
4. Válasszunk lintert: „Eslint with error prevention only”
5. Mikor induljon a linter: „Lint on save”
6. Konfiguráció kezelése: „In dedicated config files”
7. 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/

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

• .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">

npm run serve

vagy:

yarn serve

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

http://localhost:8080/

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:

  components: {
    
  }

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:

<div>
    <h1>Valami</h1>
</div>

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

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

<template>

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

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

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

A teljes employee.vue tartalma:

<template>
  <div>
    <input type="checkbox" id="employee" />
    <label for="employee">Fekete Péter</label>
  </div>
</template>
 
<script>
  export default {};
</script>