Vue: projekty

52. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

Proč jsme začali využívat Vue?

Projekty

Projekty

  • projekty v jednom souboru nedávají smysl
  • kód který používáme v scriptu není optimalizovaný pro produkci

Vue-cli

  • správce projektů Vue
  • pomocí něj vytváříme, spouštíme a sestavujeme projekty
  • instalujeme pomocí npm
  • zastaralé, ale stále se používá

Vite

  • správce projektů nejen pro Vue
  • instalace se děje automaticky, není potřeba ručně nic instalovat

Vytvoříme si projekt!

  • npm create vite@latest
  • nevybereme žádné balíčky navíce
  • npm install

Co znamená sestavit projekt?

Projekt

  • npm projekt, máme package.json i node_modules
  • index.html
  • public/
  • src/
  • src/assets
  • src/components
  • src/App.vue
  • src/main.js

Soubory .vue

  • speciální soubory
  • známe již z našeho jednoduchého HTML
  • komponenty

Komponenty

  • síla Vue náleží komponentám
  • komponenty můžeme propojovat dohromady a navazovat je
  • můžeme předávat data
  • každá komponenta má své vlastní data, které s nikým nesdílí
  • každá komponenta má template, script a nepovinně style
  • později: další vlastnosti a funkcionality, komunikace s jinými komponentami

Každá komponenta je instancí Vue.

Můžeme tedy definovat data, methods, mounted a další.

Vlastnost components

  • definujeme které komponenty můžeme uvnitř této komponenty využívat
  • tyto komponenty musíme v JS importovat pomocí zápisu
  • import JmenoKomponenty from './components/JmenoKomponenty.vue'

  • komponenty poté můžeme vkládat pomocí zápisu tagu
  • <JmenoKomponenty></JmenoKomponenty>

Skripty

serve — spuštění (development)

  • zapneme pomocí npm run dev
  • na lokálním počítači spustí webový server s naší aplikací
  • obvykle na nějakém portu 808x

build — sestavení

  • spustíme pomocí npm run build
  • sestaví aplikaci do pár souborů, které můžeme nahrát na hosting
  • sestavuje se do složky dist

Styly

  • jednotlivým komponentám můžeme definovat styly
  • vložíme do souboru .vue tag style vedle tagů template a script
  • tyto komponenty budou však globální právě tehdy, když se komponenta poprvé načte

Styly scoped

  • označíme styly jako určené pouze pro aktuální komponentu
  • poté se při načtení komponenty budou používat právě tyhle styly
  • žádný jiný prvek na stránce k nim nebude mít přístup
                            
                        

props — vlastnosti

  • můžeme definovat na Vue instanci
  • definuje jaké parametry můžeme z jiných komponent předávat téhle
  • určujeme jméno (což bude k dispozici jako proměnná) a datový typ
  • např. tedy: String, Number, Object
  • později: pokročilá validace dat

computed — vypočítané proměnné

  • můžeme definovat na Vue instanci
  • jsou to speciální proměnné, které se mění v závislosti na jiných datech
  • používáte tedy jako nějaké formátovací proměnné, když nechceme upravovat předešlé data

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/