Skalerbar mappestruktur
Organisér store Vue-projekter, så de er nemme at vedligeholde.
Skalerbar mappestruktur er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 3 af 3. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 3 lektioner i alt.
Strukturen betyder noget
Når en Vue-app vokser til mere end en håndfuld filer, afgør organiseringen, hvor let den er at navigere i, vedligeholde og introducere nye udviklere til. En god struktur kan skaleres; en kaotisk struktur gør alle langsommere.
Typebaseret organisering
Den typebaserede tilgang grupperer filer efter, hvad de er: alle komponenter sammen, alle visninger sammen og alle tilstandslagre sammen. Den er enkel og fungerer godt til små og mellemstore apps.
src/
components/
views/
stores/
composables/
router/Funktionsbaseret organisering
Den funktionsbaserede tilgang grupperer filer efter den funktion, de hører til. Alt til godkendelsesfunktionen ligger i én mappe, hvilket gør store apps lettere at forstå.
src/
features/
auth/
LoginView.vue
useAuth.js
authStore.js
cart/
CartView.vue
cartStore.jsValg af tilgang
Den typebaserede tilgang er fantastisk til mindre apps. Når en app vokser, og antallet af funktioner stiger, holder den funktionsbaserede tilgang relateret kode samlet og reducerer springen mellem mapper. Mange teams starter typebaseret og skifter tilgang, efterhånden som de skalerer.
Adskillelse af visninger og komponenter
Skeln mellem visninger (komponenter på sideniveau, der er knyttet til ruter) og komponenter (genanvendelige byggeblokke). Denne adskillelse gør det tydeligt, hvilke dele der kan knyttes til ruter, og hvilke der deles.
views/ // routed pages: HomeView.vue, AboutView.vue
components/ // reusable: BaseButton.vue, UserCard.vueOrganisering af composables
Opbevar genanvendelig logik fra Composition API i en mappe med navnet composables. Når navnene har præfikset use, kan man med det samme se, hvad de bruges til.
composables/
useAuth.js
useFetch.js
useLocalStorage.jsOrganisering af tilstandslagre
Placér globale tilstandslagre i en mappe med navnet stores, med én fil pr. domæne. Det gør tilstandshåndteringen nem at finde og modulær.
stores/
user.js
cart.js
settings.jsNavngivningskonventioner
Ensartethed mindsker friktion. Brug PascalCase til komponentfiler, sæt præfikset Base på grundkomponenter, og brug navne med flere ord for at undgå sammenstød med HTML-elementer.
// components
BaseButton.vue
BaseInput.vue
UserProfileCard.vue
// composables
useAuth.jsBarrel-eksporter
En barrel er en index.js-fil, der eksporterer indholdet fra en mappe igen, så brugere importerer fra én sti i stedet for mange.
// composables/index.js
export { useAuth } from "./useAuth"
export { useFetch } from "./useFetch"Import fra en barrel
Med en barrel kan flere importer samles på én overskuelig linje, hvilket forbedrer læsbarheden.
import { useAuth, useFetch } from "@/composables"Bevar ensartetheden
Uanset hvilken struktur du vælger, skal du anvende den konsekvent og dokumentere den i projektets README. Den bedste struktur er den, som hele teamet forstår og følger. Omstrukturér mod en funktionsbaseret tilgang, efterhånden som appen vokser.
Hurtigt tjek
Test din viden om mappestruktur.
Opsummering
Organisér efter type i mindre apps og efter funktion, når du skalerer. Adskil rutevisninger fra genanvendelige komponenter, opbevar composables og tilstandslagre i deres egne mapper, følg en ensartet navngivning, og brug barrel-eksporter til overskuelige importer. Det er ensartethed, dokumenteret for teamet, der virkelig gør en struktur skalerbar.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 42
- Lektioner
- 156
Ofte stillede spørgsmål
Er lektionen “Skalerbar mappestruktur” gratis?
Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Skalerbar mappestruktur”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 3 lektioner i alt.
Hvad lærer jeg i “Skalerbar mappestruktur”?
Organisér store Vue-projekter, så de er nemme at vedligeholde. Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Vue Academy?
Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 3.
Hvor lang tid tager lektionen “Skalerbar mappestruktur”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Vue Academy-lektion?
Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Mixins og brugerdefinerede directives
- Udvikling af plugins
- Skalerbar mappestruktur