Konfigurace projektu

Konfigurační soubory pro Vue a Webpack.

package.json webpack.config.js

Cvičení - Vue a Webpack

1

Produkt

to dáš

Stáhněte si webovou aplikaci, která simuluje nakupování. Tato aplikace je napsaná v čistém JavaScriptu. Prohlédněte si její zdrojový kód a vyzkoušejte si, jak funguje. Poté aplikaci přepište pomocí frameworku Vue tak, aby dělala totéž, co původní aplikace.

2

Produkt pomocí Webpacku

to dáš

Vezměte své řešení předchozího příkladu a upravte váš projekt tak, aby používal Webpack. Následujte tyto kroky.

  1. Vytvořte si složku pro váš nový projekt s názvem product-webpack.
  2. Vložte do něj konfigurační soubory package.json a webpack.config.js z této lekce.
  3. Uvnitř této složky vytvořte složku src, která bude obsahovat zdrojové kódy vašeho projektu - index.html, index.js a style.css.
  4. Obrázek produktu vložte do složky src/assets/img. Upravte cestu k tomu obrázku uvnitř souboru index.html na assets/img/product.png.
  5. V souboru index.js správně importujte Vue, a soubory index.html a style.css, aby Webpack věděl, že je má zahrnout do výsledného sestavení.
  6. V souboru index.html smažte značku script pro framework Vue a na konci značky body nahraďte skript index.js skriptem bundle.js.
  7. Otevřete složku projektu v terminálu a nainstalujte veškeré závislosti pomocí npm install.
  8. Sestavte projekt pomocí npm run build.
  9. Spusťe Live Server a vyzkoušejte, zda váš projekt správně funguje.

Cvičení - Vue komponenty

3

Úkolníček

to dáš

Stáhněte si připravený Webpack projekt, který zobrazuje jedno zaškrtávací tlačítko. Prohlédněte si strukturu projektu.

  1. Upravte komponentu CheckButton tak, aby se tlačítko při kliknutí měnilo na křížek a zpět. To můžete provést například tak, že vy vytvoříte datovou položku, která se bude při kliknutí měnit z true na false a zpět.
  2. Vložte do aplikace několik takovýchto tlačítek.
  3. Vytvořte komponentu TodoItem, která bude představovat nějaký úkol v úkolníčku. Tato komponenta bude používat tyto props
    • název úkolu,
    • čas, do kdy má být úkol splněn,
    • zaškrtávací tlačítko indikující, zde je zrovna úkol splněn či nikoliv.
  4. Vložte do vaší aplikace několik úkolů a vyzkoušejte, že lze používat zaškrtávací tlačítka.
  5. V datech komponenty App vytvořte pole obsahující objekty pro jednotlivé úkoly. Použijte direktivu v-for a zobrazte pro každý prvek pole odpovídající komponentu TodoItem.