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

Instalace (doma)

• npm install -g @vue/cli
• restartujeme IDE / konzoli / ...


• spouštíme pomocí vue

Instalace (ve škole)

• npm install -g @vue/cli


• získáme cestu %appdata%
• v cestě najdeme npm/node_modules/@vue/cli/bin
• v něm otevřeme powershell
• spouštíme pomocí node vue.js
• node %appdata%/npm/node_modules/@vue/cli/bin/vue.js

Co znamená sestavit projekt?

Vytvoříme si projekt!

• vue create
• odebereme všechny nástavby (features)
• vybereme verzi v2
• máme vytvořený projekt

Projekt

• npm projekt, máme package.json i node_modules
• public/
• public/index.html
• 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 nepovině 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ší.

Data však nyní musíme předávat jako návratový objekt metody data.

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 serve
• 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