PricingLoginStart free
Sveltejs Academy · Lektion

Projektstruktur: src routes static

Utforska katalogstrukturen i ett SvelteKit-projekt och syftet med varje mapp.

Lektion 3 av 413 steg

Projektstruktur: src routes static är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Mappar på toppnivå

Ett SvelteKit-projekt har följande viktiga mappar: src/, static/ samt konfigurationsfiler i roten.

Mappen src

src/ innehåller all din applikationskod: routar, komponenter, bibliotekskod och appens startpunkt.

Mappen src/routes

Varje undermapp i src/routes motsvarar en URL. En fil med namnet +page.svelte i en mapp definierar vad som renderas på den sökvägen.

Exempel på routning

Sökvägen src/routes/about/+page.svelte renderas på /about i webbläsaren.

src/routes/
  +page.svelte         -> /
  about/+page.svelte   -> /about
  blog/[slug]/+page.svelte -> /blog/:slug

Mappen src/lib

src/lib är till för delade moduler och komponenter. Importera från den med aliaset $lib.

import Button from "$lib/Button.svelte";

Mappen static

Filer i static/ serveras som de är från URL-roten. Använd den för favicon.png, robots.txt och andra obearbetade resurser.

Konfigurationsfiler

Roten innehåller svelte.config.js, vite.config.js, package.json och eventuellt tsconfig.json.

svelte.config.js

Definierar förbehandlare, adapter och alternativ på kit-nivå. Adaptern avgör hur appen byggs för distribution.

import adapter from "@sveltejs/adapter-auto";
export default { kit: { adapter: adapter() } };

vite.config.js

Konfigurerar Vite (den underliggande paketeraren). Lägg till tillägg, alias, proxyregler för servern och byggalternativ här.

Filen app.html

src/app.html är HTML-skalet som omsluter varje sida. Platshållare som %sveltekit.head% fylls i vid byggtid.

Hooks-fil

src/hooks.server.js låter dig fånga upp begäranden på servern. Vi går igenom hooks i en senare kurs.

Snabbtest

Var finns filen för en SvelteKit-sidas route?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du känner nu till projektstrukturen: src för kod, routes för sidor, lib för delad kod och static för obearbetade resurser.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
41
Lektioner
163
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Projektstruktur: src routes static” gratis?

Ja – hela texten till ”Projektstruktur: src routes static” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Projektstruktur: src routes static”?

Utforska katalogstrukturen i ett SvelteKit-projekt och syftet med varje mapp. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?

Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Projektstruktur: src routes static”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?

Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Vad är Svelte och varför kompileras det?
  2. Skapa ett projekt med npm create svelte
  3. Projektstruktur: src routes static
  4. Utvecklingsservern och Hot Module Replacement
← Tillbaka till Sveltejs Academy