Konfigurace live serveru

Nastavení Live Serveru v VS Code aby dokázal pracovat s routováním.

Obsah souboru .vscode/settings.json.

{
  "liveServer.settings.root": "/dist",
  "liveServer.settings.file": "index.html",
}

Cvičení - Základy routování

1

U Potůčku

to dáš
  1. Stáhněte si design stránky Restaurace U Potůčku.
  2. Stáhněte si startovací projekt pro Vue.js aplikaci s routováním.
  3. Uvnitř vašeho projektu vytvořte komponenty Home, Menu a Contact zobrazující jednotlivé částí stránky.
  4. Centrální komponenta App nechť obsahuje navigaci a prostor pro jednotlivé stránky.
  5. Pomocí routeru zařiďte, aby šlo v aplikaci překlikávat mezi jedlitovými komponentami pomocí horního menu.

Cvičení - Router parametry

2

Příchozí pošta

to dáš
  1. Stáhněte si datový objekt obsahující 100 emailů.
  2. Založte si nový Vue.js projekt pomocí startovacího Vue.js projektu.
  3. Vytvořte komponentu Inbox, která bude zobrazovat všech 100 emailů.
  4. Pomocí Vue routeru zařiďte, že když uživatel zadá v URL cestu např. /25, zobrazíte ve vaší komponentě pouze prvních 25 emailů. Zařiďte, aby vaše stránka fungovala pro libovolný počet emailů zadaných v URL.
  5. Vložte na vaši stránky 4 odkazy s nadpisy 25, 50, 75, 100. Při kliknutí na daný odkaz se zobrazí zvolený počet emailů.