Struttura del progetto: src routes static
Esplori la struttura delle directory di un progetto SvelteKit e lo scopo di ciascuna cartella.
Struttura del progetto: src routes static è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. 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 Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Cartelle principali
Un progetto SvelteKit contiene queste cartelle principali: src/, static/ e i file di configurazione nella directory radice.
La cartella src
src/ contiene tutto il codice dell'applicazione: route, componenti, codice delle librerie e punto di ingresso dell'app.
La cartella src/routes
Ogni sottocartella di src/routes corrisponde a un URL. Un file chiamato +page.svelte in una cartella definisce ciò che viene visualizzato in quel percorso.
Esempio di route
Il percorso src/routes/about/+page.svelte viene visualizzato all'indirizzo /about nel browser.
src/routes/
+page.svelte -> /
about/+page.svelte -> /about
blog/[slug]/+page.svelte -> /blog/:slugLa cartella src/lib
src/lib è destinata a moduli e componenti condivisi. Li importi usando l'alias $lib.
import Button from "$lib/Button.svelte";La cartella static
I file in static/ vengono serviti così come sono dalla radice dell'URL. La usi per favicon.png, robots.txt e altre risorse non elaborate.
File di configurazione
Nella directory radice si trovano svelte.config.js, vite.config.js, package.json e, facoltativamente, tsconfig.json.
svelte.config.js
Definisce i preprocessori, l'adapter e le opzioni a livello di Kit. L'adapter stabilisce come viene compilata l'app per la distribuzione.
import adapter from "@sveltejs/adapter-auto";
export default { kit: { adapter: adapter() } };vite.config.js
Configura Vite, il bundler sottostante. Qui può aggiungere plugin, alias, regole proxy per il server e opzioni di build.
Il file app.html
src/app.html è il guscio HTML che racchiude ogni pagina. Segnaposto come %sveltekit.head% vengono valorizzati durante la build.
File degli hook
src/hooks.server.js consente di intercettare le richieste sul server. Gli hook verranno trattati in un corso successivo.
Verifica rapida
Dove si trova il file di route di una pagina SvelteKit?
Riepilogo
Ora conosce la struttura del progetto: src per il codice, routes per le pagine, lib per il codice condiviso e static per le risorse non elaborate.
Domande Frequenti
La lezione «Struttura del progetto: src routes static» è gratuita?
Sì — il testo completo di «Struttura del progetto: src routes static» è 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 Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «Struttura del progetto: src routes static»?
Esplori la struttura delle directory di un progetto SvelteKit e lo scopo di ciascuna cartella. Eserciti Sveltejs 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 Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs 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 4.
Quanto tempo richiede la lezione «Struttura del progetto: src routes static»?
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 Sveltejs Academy?
Sì. Ogni lezione Sveltejs 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
- Che cos'è Svelte e perché compila
- Creazione di un progetto con npm create svelte
- Struttura del progetto: src routes static
- Il server di sviluppo e la sostituzione a caldo dei moduli