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

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