Soubory aplikace

Aplikace ve Vue se skládá z několika souborů a nad editorem jsou jejich záložky. Projděme si je v pořadí, v jakém je používá prohlížeč.

index.html je stránka. V jejím body je jen prázdný prvek a skript:

<div id="app"></div>
<script type="module" src="main.js"></script>

Všechno, co v náhledu vidíte, vkládá do #app Vue. type="module" skriptu dovolí používat import, který za chvíli uvidíte.

main.js aplikaci spouští:

import { createApp } from "vue";
import App from "./App.vue";
import "./style.css";

createApp(App).mount("#app");

Řádek, který začíná slovem import, si vezme něco z jiného souboru: createApp z Vue, App ze souboru App.vue (./ znamená „ve stejné složce“) a třetí řádek načte styly ze style.css. Víc o import se dozvíte v lekci Komponenty. Poslední řádek vytvoří z App aplikaci a připojí ji (anglicky mount) do #app: Vue ukáže aplikaci uvnitř tohoto prvku.

main.js je ve všech cvičeních kurzu stejný, takže ho nebudete muset měnit.

App.vue je samotná aplikace a budete v něm pracovat nejčastěji. Je to komponenta: část stránky s vlastním HTML, JavaScriptem a CSS v jednom souboru s příponou .vue. Větší aplikace se skládají z mnoha komponent a psát je se naučíte v lekci Komponenty. Zatím je celá aplikace jedna komponenta, App.

style.css obsahuje styly celé aplikace, v CSS, jak ho znáte z kurzu CSS.

Projekt ve Vue na vašem počítači má stejné soubory a k nim pár složek. Jeden takový si vytvoříte v poslední lekci.