PricingLoginStart free
Sveltejs Academy · Lektion

Projektstruktur: src routes static

Udforsk mappestrukturen i et SvelteKit-projekt og formålet med hver mappe

Lektion 3 af 413 trin

Projektstruktur: src routes static er en gratis Sveltejs Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Sveltejs Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Sveltejs Academy-kurset indeholder 4 lektioner i alt.

Mapper på øverste niveau

Et SvelteKit-projekt har disse vigtige mapper: src/, static/ samt konfigurationsfiler i roden.

Mappen src

src/ indeholder al din applikationskode: routes, komponenter, biblioteks- og startkode til appen.

Mappen src/routes

Hver undermappe i src/routes svarer til en URL. En fil med navnet +page.svelte i en mappe definerer, hvad der renderes på den sti.

Eksempel på en route

Stien src/routes/about/+page.svelte renderes på /about i browseren.

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

Mappen src/lib

src/lib er til delte moduler og komponenter. Importér fra den ved hjælp af aliaset $lib.

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

Mappen static

Filer i static/ udstilles uændret fra URL-roden. Brug den til favicon.png, robots.txt og andre ubehandlede aktiver.

Konfigurationsfiler

Roden indeholder svelte.config.js, vite.config.js, package.json og eventuelt tsconfig.json.

svelte.config.js

Definerer preprocessorer, adapteren og indstillinger på kit-niveau. Adapteren bestemmer, hvordan din app bygges til udrulning.

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

vite.config.js

Konfigurerer Vite (den underliggende bundler). Tilføj plugins, aliaser, proxyregler for serveren og build-indstillinger her.

Filen app.html

src/app.html er den HTML-skal, der omslutter hver side. Pladsholdere som %sveltekit.head% udfyldes på buildtid.

Hook-fil

src/hooks.server.js lader dig opfange forespørgsler på serveren. Vi gennemgår hooks på et senere kursus.

Hurtigt tjek

Hvor ligger en SvelteKit-sides route-fil?

Besvar den i den interaktive lektion

Opsummering

Du kender nu projektstrukturen: src til kode, routes til sider, lib til delt kode og static til rå aktiver.

Gratis at komme i gang

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
41
Lektioner
163
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Projektstruktur: src routes static” gratis?

Ja — hele teksten til “Projektstruktur: src routes static” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Sveltejs Academy-kurset, skal du opgradere til CoddyKit PRO. Sveltejs Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Projektstruktur: src routes static”?

Udforsk mappestrukturen i et SvelteKit-projekt og formålet med hver mappe Du øver dig i Sveltejs 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å Sveltejs Academy?

Der kræves ingen tidligere erfaring. Sveltejs 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 4.

Hvor lang tid tager lektionen “Projektstruktur: src routes static”?

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 Sveltejs Academy-lektion?

Ja. Alle Sveltejs 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

  1. Hvad er Svelte, og hvorfor kompilerer det
  2. Opret et projekt med npm create svelte
  3. Projektstruktur: src routes static
  4. Udviklingsserveren og hot module replacement
← Tilbage til Sveltejs Academy