Vue Academy · Les

Schaalbare mappenstructuur

Organiseer grote Vue-projecten zodat ze onderhoudbaar blijven.

Les 3 van 313 stappen

Schaalbare mappenstructuur is een gratis Vue Academy-les op CoddyKit. Dit is les 3 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 3 lessen.

Structuur is belangrijk

Zodra een Vue-app meer dan een handvol bestanden bevat, bepaalt de manier waarop je die organiseert hoe makkelijk je kunt navigeren, onderhouden en nieuwe ontwikkelaars wegwijs kunt maken. Een goede structuur schaalt mee; een chaotische structuur vertraagt iedereen.

Organisatie op basis van type

De op type gebaseerde aanpak groepeert bestanden op basis van wat ze zijn: alle componenten bij elkaar, alle weergaven bij elkaar en alle stores bij elkaar. Dit is eenvoudig en werkt goed voor kleine tot middelgrote apps.

src/
  components/
  views/
  stores/
  composables/
  router/

Organisatie op basis van functionaliteit

De op functionaliteit gebaseerde aanpak groepeert bestanden op basis van de functionaliteit waartoe ze behoren. Alles voor de authenticatiefunctie staat in één map, waardoor grote apps makkelijker te begrijpen zijn.

src/
  features/
    auth/
      LoginView.vue
      useAuth.js
      authStore.js
    cart/
      CartView.vue
      cartStore.js

Een aanpak kiezen

De op type gebaseerde aanpak is ideaal voor kleinere apps. Naarmate een app groeit en het aantal functionaliteiten toeneemt, houdt de op functionaliteit gebaseerde aanpak verwante code bij elkaar en hoef je minder tussen mappen te springen. Veel teams beginnen op typebasis en stappen bij het opschalen over.

Weergaven en componenten scheiden

Maak onderscheid tussen weergaven (componenten op paginaniveau waaraan een route is gekoppeld) en componenten (herbruikbare bouwblokken). Zo wordt duidelijk welke onderdelen een route hebben en welke gedeeld worden.

views/      // routed pages: HomeView.vue, AboutView.vue
components/ // reusable: BaseButton.vue, UserCard.vue

Composables organiseren

Houd herbruikbare logica van de Composition API in een composables-map. Door ze een use-voorvoegsel te geven, zie je in één oogopslag waarvoor ze dienen.

composables/
  useAuth.js
  useFetch.js
  useLocalStorage.js

Stores organiseren

Plaats globale stores in een stores-map, één bestand per domein. Zo blijft statusbeheer vindbaar en modulair.

stores/
  user.js
  cart.js
  settings.js

Naamgevingsconventies

Consistentie voorkomt onnodig gedoe. Gebruik PascalCase voor componentbestanden, geef basiscomponenten het voorvoegsel Base en gebruik namen uit meerdere woorden om botsingen met HTML-elementen te voorkomen.

// components
BaseButton.vue
BaseInput.vue
UserProfileCard.vue

// composables
useAuth.js

Barrel-exports

Een barrel is een index.js die de inhoud van een map opnieuw exporteert, zodat gebruikers vanuit één pad importeren in plaats van vanuit meerdere paden.

// composables/index.js
export { useAuth } from "./useAuth"
export { useFetch } from "./useFetch"

Importeren vanuit een barrel

Met een barrel worden meerdere imports samengevoegd tot één nette regel, wat de leesbaarheid verbetert.

import { useAuth, useFetch } from "@/composables"

Consistent blijven

Welke structuur je ook kiest, pas die consequent toe en leg haar vast in de README van het project. De beste structuur is de structuur die het hele team begrijpt en volgt. Stap naarmate de app groeit over op een indeling op basis van functionaliteit.

Korte kennistoets

Test je kennis van mappenstructuren.

Beantwoord dit in de interactieve les

Samenvatting

Organiseer kleinere apps op type en stap bij het opschalen over op functionaliteit. Scheid gerouteerde weergaven van herbruikbare componenten, houd composables en stores in hun eigen mappen, gebruik consistente namen en gebruik barrel-exports voor overzichtelijke imports. Consistentie, vastgelegd voor het team, maakt een structuur pas echt schaalbaar.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 42
Lessen: 156

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Schaalbare mappenstructuur” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Schaalbare mappenstructuur”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 3 lessen.

Wat leer ik in “Schaalbare mappenstructuur”?

Organiseer grote Vue-projecten zodat ze onderhoudbaar blijven. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Vue Academy te beginnen?

Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 3.

Hoe lang duurt de les “Schaalbare mappenstructuur”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Vue Academy?

Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Vue Academy