Skalierbare Ordnerstruktur
Organisieren Sie große Vue-Projekte so, dass sie wartbar bleiben.
Skalierbare Ordnerstruktur ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.
Struktur ist wichtig
Wenn eine Vue-Anwendung über eine Handvoll Dateien hinauswächst, bestimmt ihre Organisation, wie einfach sie zu navigieren, zu warten und für neue Entwickler zugänglich ist. Eine gute Struktur wächst mit; eine chaotische bremst alle aus.
Typbasierte Organisation
Der typbasierte Ansatz gruppiert Dateien danach, was sie sind: alle Komponenten zusammen, alle Views zusammen und alle Stores zusammen. Er ist einfach und eignet sich gut für kleine bis mittelgroße Anwendungen.
src/
components/
views/
stores/
composables/
router/Featurebasierte Organisation
Der featurebasierte Ansatz gruppiert Dateien nach dem Feature, zu dem sie gehören. Alles für das auth-Feature liegt in einem Ordner, wodurch große Anwendungen leichter verständlich werden.
src/
features/
auth/
LoginView.vue
useAuth.js
authStore.js
cart/
CartView.vue
cartStore.jsDen passenden Ansatz wählen
Die typbasierte Organisation eignet sich hervorragend für kleinere Anwendungen. Wenn eine Anwendung wächst und die Zahl der Features zunimmt, hält die featurebasierte Organisation zusammengehörigen Code beieinander und reduziert das Wechseln zwischen Ordnern. Viele Teams beginnen typbasiert und wechseln beim Skalieren zu einer featurebasierten Struktur.
Views und Komponenten trennen
Unterscheiden Sie zwischen Views (seitenweiten, gerouteten Komponenten) und Komponenten (wiederverwendbaren Bausteinen). Diese Trennung macht deutlich, welche Teile über Routing erreichbar und welche gemeinsam verwendet werden.
views/ // routed pages: HomeView.vue, AboutView.vue
components/ // reusable: BaseButton.vue, UserCard.vueComposables organisieren
Bewahren Sie wiederverwendbare Logik der Composition API in einem Ordner composables auf. Die Benennung mit dem Präfix use macht ihren Zweck auf einen Blick erkennbar.
composables/
useAuth.js
useFetch.js
useLocalStorage.jsStores organisieren
Legen Sie globale State-Stores in einem Ordner stores ab – eine Datei pro Fachbereich. So bleibt die Zustandsverwaltung auffindbar und modular.
stores/
user.js
cart.js
settings.jsNamenskonventionen
Konsistenz reduziert Reibung. Verwenden Sie PascalCase für Komponentendateien, versehen Sie Basiskomponenten mit dem Präfix Base und verwenden Sie mehrteilige Namen, um Konflikte mit HTML-Elementen zu vermeiden.
// components
BaseButton.vue
BaseInput.vue
UserProfileCard.vue
// composables
useAuth.jsBarrel-Exporte
Ein Barrel ist eine index.js-Datei, die die Inhalte eines Ordners erneut exportiert, sodass Konsumenten aus einem Pfad statt aus vielen importieren.
// composables/index.js
export { useAuth } from "./useAuth"
export { useFetch } from "./useFetch"Aus einem Barrel importieren
Mit einem Barrel lassen sich mehrere Imports zu einer einzigen übersichtlichen Zeile zusammenfassen, was die Lesbarkeit verbessert.
import { useAuth, useFetch } from "@/composables"Konsistent bleiben
Für welche Struktur Sie sich auch entscheiden: Wenden Sie sie konsequent an und dokumentieren Sie sie in der README des Projekts. Die beste Struktur ist diejenige, die das gesamte Team versteht und befolgt. Strukturieren Sie die Anwendung beim Wachsen in Richtung Features um.
Schnelltest
Testen Sie Ihr Wissen über die Ordnerstruktur.
Zusammenfassung
Organisieren Sie kleinere Anwendungen nach Typ und strukturieren Sie sie beim Skalieren nach Feature. Trennen Sie geroutete Views von wiederverwendbaren Komponenten, bewahren Sie Composables und Stores in eigenen Ordnern auf, verwenden Sie einheitliche Namenskonventionen und nutzen Sie Barrel-Exporte für übersichtliche Imports. Entscheidend für eine skalierbare Struktur ist die Konsistenz, die im Team dokumentiert und eingehalten wird.
Häufig gestellte Fragen
Ist die Lektion „Skalierbare Ordnerstruktur“ kostenlos?
Ja — der vollständige Text von „Skalierbare Ordnerstruktur“ 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 „Skalierbare Ordnerstruktur“?
Organisieren Sie große Vue-Projekte so, dass sie wartbar bleiben. 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 3 von 3.
Wie lange dauert die Lektion „Skalierbare Ordnerstruktur“?
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
- Mixins und benutzerdefinierte Direktiven
- Plugin-Entwicklung
- Skalierbare Ordnerstruktur