< Vue

Vue CLI

Szerző: Sallai András

Copyright © Sallai András, 2021

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/

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

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:

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.

Komponens hozzáadása

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>