Gratulujeme!

Gratulujeme, vaše sledování návyků funguje a jste na konci kurzu Vue! Aplikace si načte návrhy ze souboru, nechá vás návyky odškrtávat, přidávat vlastní a odebírat je, filtruje seznam, ukazuje postup i sérii a všechno si pamatuje. A postavili jste ji sami, kousek po kousku.

Poslední vylepšení. Série se může přerušit, ale tu nejdelší si zapamatujte jako rekord. Uložte ho pomocí useLocalStorage pod klíčem "rekord" a ve funkci ukonciDen() ho po změně série zvyšte, kdykoli je série delší než rekord:

const rekord = useLocalStorage("rekord", 0);

if (serie.value > rekord.value) {
    rekord.value = serie.value;
}

Co jste se naučili. Podívejte se, jak si ve vaší aplikaci našel místo celý kurz:

• Komponenty: App.vue drží data a Navyk.vue zobrazuje jeden návyk. Props posílají data dolů (:navyk="navyk") a události nahoru (emit('prepnout', navyk.id) a @prepnout="prepni").
• Šablona: {{ }} zobrazuje hodnoty, :class přeškrtne splněný návyk a :style nastaví šířku ukazatele.
• Stav: refy drží, co se mění, ve skriptu s .value a v šabloně bez něj, a kdykoli se změní, Vue samo upraví stránku.
• Podmínky a seznamy: v-if, v-else-if a v-else vybírají mezi načítáním, chybou a aplikací a v-for s :key zobrazuje návyky.
• Formuláře: v-model s .trim, @submit.prevent a chybová zpráva.
• Vypočítané hodnoty: počet, procenta, vseHotovo a filtrovaný seznam, které se přepočítají při každé změně návyků.
• Životní cyklus: onMounted načte návyky pomocí fetch(), jakmile je aplikace na stránce.
• Sledování a composables: useLocalStorage pomocí watch uloží jakoukoli hodnotu, takže tři řádky uloží tři hodnoty.

Jen sloty ve vaší aplikaci nejsou. Ty z lekce Sloty a z fotogalerie dovolí komponentě, třeba panelu, převzít od rodiče celé kusy stránky.

Vue na vlastním počítači. Tady vaše soubory při každém kliknutí na Spustit připraví náš web. Na vlastním počítači to dělá nástroj Vite a všechno vám nachystá create-vue, oficiální nástroj Vue pro založení projektu. Potřebujete Node.js (stáhněte si verzi LTS), se kterým přijde i npm, program na instalaci balíčků, a terminál (příkazový řádek). V terminálu přejděte do složky, kde chcete mít projekty, a spusťte:

npm create vue@latest

create-vue se zeptá na pár věcí: nejdřív na název projektu, třeba navyky, podle kterého se bude jmenovat i jeho složka, a pak na to, co do projektu přidat, třeba TypeScript, Vue Router nebo Pinia. Zatím nic z toho nepotřebujete, takže nevybírejte nic. Když se zeptá ještě na něco, nechte navrženou odpověď. Na konci vypíše další příkazy:

cd navyky
npm install
npm run dev

cd přejde do složky projektu, npm install stáhne Vue, Vite a všechno další, co projekt potřebuje (do složky node_modules), a npm run dev spustí Vite. Ten vypíše adresu, třeba http://localhost:5173/: otevřete ji v prohlížeči. Terminál nechte běžet: kdykoli uložíte soubor, stránka v prohlížeči se sama aktualizuje. Vite zastavíte klávesami Ctrl+C v terminálu.

Soubory projektu. Jsou to soubory ze cvičení, jen ve složkách:

• index.html je v hlavní složce projektu a má stejný <div id="app">. Jeho skript načítá /src/main.js.
• src/main.js připojí App pomocí createApp(App).mount("#app"), stejně jako váš main.js.
• src/App.vue je hlavní komponenta. V novém projektu je v ní ukázka, nahraďte ji tou svou.
• src/components/ je pro další komponenty, třeba Navyk.vue (pokud složka chybí, vytvořte ji). Import v App.vue pak bude import Navyk from "./components/Navyk.vue";. Ukázkové komponenty, které ve složce jsou, můžete smazat.
• public/ je pro soubory, které stránka načítá tak, jak jsou. Dejte tam navyky.json a fetch("navyky.json") ho najde.

useLocalStorage.js dejte do src vedle App.vue a jeho import zůstane, jak je. (Větší projekty mívají composables ve vlastní složce, src/composables.) Do src patří i váš style.css: v src/main.js ho importujte řádkem import "./style.css"; místo stylů ukázky, pokud tam nějaké jsou.

Vue DevTools. Přidejte si do prohlížeče rozšíření Vue DevTools (je pro Chrome, Edge i Firefox, návod najdete na devtools.vuejs.org). Nástroje pro vývojáře (F12) pak dostanou kartu Vue, která ukáže vaše komponenty jako strom, s jejich props a stavem. Ref tam můžete i změnit a sledovat, jak se mění stránka. Funguje na stránkách, které běží přes npm run dev.

Na internet. Když je aplikace hotová, připraví ji pro internet příkaz npm run build: Vite uloží hotové soubory do složky dist a ze všech souborů .vue udělá obyčejný JavaScript, kterému rozumí každý prohlížeč. npm run preview vám hotovou verzi ukáže na vlastním počítači. Pak stačí složku dist dát na webový server. Nejrychlejší je Netlify Drop (app.netlify.com/drop): přetáhněte na stránku složku dist a dostanete adresu, kterou můžete poslat komukoli (aby web zůstal online, založte si zdarma účet). Služby jako Netlify a Vercel umí projekt také samy sestavit a zveřejnit, pokaždé, když jeho kód změníte na GitHubu, webu pro ukládání kódu.

Kam dál? Teď znáte jádro Vue: stejné komponenty, refy a vypočítané hodnoty najdete v každé aplikaci ve Vue, malé i velké. Na řadu přijdou tyhle věci:

• Vue Router pro aplikace s několika stránkami, každou s vlastní adresou, třeba / a /statistiky. Každá stránka je komponenta.
• Pinia pro stav, který sdílí víc komponent, třeba objednávku v kavárně. Je jako modul objednavka.js z lekce Composables, jen s více nástroji a s podporou ve Vue DevTools.
• TypeScript: s <script setup lang="ts"> napíšete typy svých props a refů a editor najde spoustu chyb dřív, než aplikaci vůbec spustíte. Naučí vás ho kurz TypeScriptu.
• Nuxt, framework postavený na Vue pro celé weby. Z každého souboru ve složce pages udělá stránku s vlastní adresou a umí stránky vykreslit už na serveru, takže návštěvníci i vyhledávače dostanou hned hotové HTML. A na fetch() vašich stránek v něm může odpovídat váš vlastní kód na serveru, v takzvaných serverových cestách (server routes).

Ve starších návodech zase potkáte Options API z první lekce, tedy komponenty psané pomocí export default { data() { … }, methods: { … } } místo <script setup>. Uvnitř je to stejné Vue, takže s tím, co znáte, ho rychle pochopíte. Dokumentace na vuejs.org vysvětluje všechno, co jste tu potkali, v obou podobách.