Die Dateien einer Vue-App

Eine Vue-App besteht aus mehreren Dateien, und ihre Tabs findest du über dem Editor. Gehen wir sie in der Reihenfolge durch, in der der Browser sie verwendet.

index.html ist die Seite. Ihr body enthält nur ein leeres Element und ein Skript:

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

Alles, was du in der Vorschau siehst, hat Vue in #app eingefügt. Mit type="module" darf das Skript import verwenden, das du gleich siehst.

main.js startet die App:

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

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

Eine Zeile, die mit import beginnt, holt etwas aus einer anderen Datei: createApp aus Vue, App aus der Datei App.vue (./ bedeutet „im selben Ordner“), und die dritte Zeile lädt die Stile aus style.css. Mehr über import erfährst du in der Lektion Komponenten. Die letzte Zeile erstellt aus App die App und hängt sie in #app ein (englisch: mount): Vue zeigt die App innerhalb dieses Elements.

main.js ist in jeder Übung dieses Kurses gleich, du musst es also nicht ändern.

App.vue ist die App selbst, und hier arbeitest du die meiste Zeit. Sie ist eine Komponente: ein Teil der Seite mit eigenem HTML, JavaScript und CSS, alles in einer Datei, die auf .vue endet. Größere Apps bestehen aus vielen Komponenten, und wie du sie schreibst, lernst du in der Lektion Komponenten. Vorerst ist die ganze App eine einzige Komponente, App.

style.css enthält die Stile der ganzen App, in CSS, wie du es aus dem CSS-Kurs kennst.

Ein Vue-Projekt auf deinem eigenen Computer hat dieselben Dateien und dazu ein paar Ordner. Eins davon legst du in der letzten Lektion an.