Struttura delle cartelle scalabile
Organizzi i progetti Vue di grandi dimensioni per facilitarne la manutenzione.
Struttura delle cartelle scalabile è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 3 lezioni in totale.
La struttura è importante
Quando un'app Vue supera una manciata di file, il modo in cui la organizza determina quanto sarà facile esplorarla, mantenerla e accogliere nuovi sviluppatori. Una buona struttura cresce con il progetto; una struttura caotica rallenta tutti.
Organizzazione per tipo
L'approccio basato sul tipo raggruppa i file in base alla loro natura: tutti i componenti insieme, tutte le viste insieme, tutti gli store insieme. È semplice e funziona bene per app di piccole e medie dimensioni.
src/
components/
views/
stores/
composables/
router/Organizzazione per funzionalità
L'approccio basato sulle funzionalità raggruppa i file in base alla funzionalità a cui appartengono. Tutto ciò che riguarda l'autenticazione si trova in un'unica cartella, rendendo più semplici da comprendere le app di grandi dimensioni.
src/
features/
auth/
LoginView.vue
useAuth.js
authStore.js
cart/
CartView.vue
cartStore.jsScegliere un approccio
L'organizzazione per tipo è ottima per le app più piccole. Quando un'app cresce e le funzionalità aumentano, quella per funzionalità mantiene insieme il codice correlato e riduce gli spostamenti tra cartelle. Molti team iniziano con un'organizzazione per tipo e la modificano quando il progetto cresce.
Separare viste e componenti
Distingua le viste (componenti a livello di pagina gestiti dal router) dai componenti (elementi costitutivi riutilizzabili). Questa separazione chiarisce quali parti possono essere raggiunte tramite il router e quali sono condivise.
views/ // routed pages: HomeView.vue, AboutView.vue
components/ // reusable: BaseButton.vue, UserCard.vueOrganizzare i composable
Conservi la logica riutilizzabile della Composition API in una cartella composables. Utilizzare il prefisso use nei nomi ne indica immediatamente lo scopo.
composables/
useAuth.js
useFetch.js
useLocalStorage.jsOrganizzare gli store
Inserisca gli store dello stato globale in una cartella stores, con un file per ogni dominio. In questo modo la gestione dello stato rimane facile da individuare e modulare.
stores/
user.js
cart.js
settings.jsConvenzioni di denominazione
La coerenza riduce gli attriti. Utilizzi PascalCase per i file dei componenti, aggiunga il prefisso Base ai componenti di base e usi nomi composti da più parole per evitare conflitti con gli elementi HTML.
// components
BaseButton.vue
BaseInput.vue
UserProfileCard.vue
// composables
useAuth.jsEsportazioni tramite barrel
Un barrel è un file index.js che riesporta il contenuto di una cartella, così chi lo utilizza importa tutto da un unico percorso anziché da molti percorsi diversi.
// composables/index.js
export { useAuth } from "./useAuth"
export { useFetch } from "./useFetch"Importare da un barrel
Con un barrel, più importazioni si possono riunire in un'unica riga ordinata, migliorando la leggibilità.
import { useAuth, useFetch } from "@/composables"Mantenere la coerenza
Qualunque struttura scelga, la applichi in modo coerente e la documenti nel README del progetto. La struttura migliore è quella che tutto il team comprende e segue. Man mano che l'app cresce, la riorganizzi orientandola alle funzionalità.
Verifica rapida
Metta alla prova le Sue conoscenze sulla struttura delle cartelle.
Riepilogo
Organizzi per tipo le app più piccole e per funzionalità i progetti che crescono. Separi le viste gestite dal router dai componenti riutilizzabili, mantenga composable e store nelle rispettive cartelle, segua convenzioni di denominazione coerenti e utilizzi le esportazioni tramite barrel per ottenere importazioni ordinate. È la coerenza, documentata per il team, a rendere davvero scalabile una struttura.
Domande Frequenti
La lezione «Struttura delle cartelle scalabile» è gratuita?
Sì — il testo completo di «Struttura delle cartelle scalabile» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 3 lezioni in totale.
Cosa imparerò in «Struttura delle cartelle scalabile»?
Organizzi i progetti Vue di grandi dimensioni per facilitarne la manutenzione. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 3.
Quanto tempo richiede la lezione «Struttura delle cartelle scalabile»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Mixin e direttive personalizzate
- Sviluppo di plugin
- Struttura delle cartelle scalabile