Vue Academy · Lektion

Generierte Projektstruktur

Verschaffen Sie sich einen Überblick über die Dateien und Ordner, die ein Vue-Projekt erzeugt

Generierte Projektstruktur ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.

Ein Rundgang durch das Projekt

Ein erstelltes Vue-Projekt besitzt eine übersichtliche Ordnerstruktur.

src/ enthält den Quellcode Ihrer Anwendung
public/ enthält statische Assets, die unverändert ausgeliefert werden
package.json enthält Abhängigkeiten und Skripte
index.html ist die Seite, in die Vue eingebunden wird

Wenn Sie wissen, wo sich die einzelnen Elemente befinden, können Sie schnell navigieren.

Der src-Ordner

Der Ordner src/ enthält alles, was Sie schreiben.

src/
  assets/        # images, fonts, global CSS
  components/    # reusable .vue components
  App.vue        # root component
  main.js        # application entry point

Der Einstiegspunkt main.js

In main.js wird die App gestartet. Die Datei erstellt die App und bindet sie ein.

import { createApp } from "vue"
import App from "./App.vue"
import "./assets/main.css"

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

Die Root-Komponente App.vue

App.vue ist die Root-Komponente. Alle anderen Komponenten befinden sich innerhalb dieser Komponente.

<template>
  <header>
    <h1>My App</h1>
  </header>
  <main>
    <HelloWorld msg="Welcome" />
  </main>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue"
</script>

Der components-Ordner

Der Ordner components/ enthält wiederverwendbare Single-File Components.

Jede .vue-Datei ist eine Komponente
Importieren Sie sie dort, wo Sie sie benötigen
Organisieren Sie sie in Unterordnern, wenn die App wächst

Der public-Ordner

Der Ordner public/ enthält statische Dateien, die unverändert in die Build-Ausgabe kopiert werden.

Die Dateien in diesem Ordner werden nicht vom Bundler verarbeitet
Verwenden Sie ihn für Favicons, robots.txt oder unveränderliche Assets
Referenzieren Sie sie mit absoluten Pfaden vom Stammverzeichnis aus

Der Mount-Punkt in index.html

index.html ist die einzige HTML-Seite. Sie enthält das Mount-Ziel.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

package.json

package.json beschreibt Ihr Projekt und dessen Abhängigkeiten.

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "dependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

Skripte in package.json

Der Abschnitt scripts definiert Befehle, die Sie mit npm run ausführen.

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

assets und public

Es gibt zwei Möglichkeiten, statische Dateien zu speichern:

src/assets/ wird vom Bundler verarbeitet, für das Caching mit Hashes versehen und im Code importiert
public/ wird unverändert kopiert und über einen festen Pfad referenziert

Verwenden Sie Assets für Dateien, die Sie importieren, und public für Dateien, deren URL stabil bleiben muss.

Wie alles zusammenspielt

Beim Laden der App läuft Folgendes ab:

Der Browser lädt index.html
Er führt main.js über ein Module-Script-Tag aus
main.js bindet App.vue in #app ein
App.vue rendert untergeordnete Komponenten

Schnelltest

Testen Sie Ihr Wissen über die Projektstruktur.

Zusammenfassung: Projektstruktur

Sie haben die Struktur eines Vue-Projekts erkundet:

src/ enthält Ihren Code
main.js startet die App
App.vue ist die Root-Komponente
components/ enthält wiederverwendbare Bestandteile
public/ und index.html stellen statische Inhalte bereit
package.json definiert Abhängigkeiten und Skripte

Als Nächstes konfigurieren Sie die CLI und fügen Plugins hinzu.

Häufig gestellte Fragen

Ist die Lektion „Generierte Projektstruktur“ kostenlos?

Ja — der vollständige Text von „Generierte Projektstruktur“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Generierte Projektstruktur“?

Verschaffen Sie sich einen Überblick über die Dateien und Ordner, die ein Vue-Projekt erzeugt Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.

Wie lange dauert die Lektion „Generierte Projektstruktur“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Vue Academy