Introduktion til Svelte og Sveltekit

Hvad er svelte?

Svelte er et JavaScript framework til opbygning af brugergrænseflader.

Hvad er sveltekit?

SvelteKit er et værktøjssæt til at bygge Svelte-applikationer.

Svelte er en anderledes tilgang til opbygning af brugergrænseflader. Mens traditionelle frameworks som React og Vue udfører hovedparten af ​​deres arbejde i browseren (klienten), pre-kompilerer Svelte det arbejde, når du bygger din app. Det har den kæmpe fordel at brugeren, ikke skal vente på en webside der fungerer dårligt eller loader meget langsomt. Man kan sige at SvelteKit sørger for at din app er hurtig og “light-weight”

React og Vue vs Svelte

Sammenlignet med React og Vue er Svelte nemmere at forstå og komme i gang med, da størstedelen af ​​Svelte er helt almindelig JavaScript, HTML og CSS.

Hvis du gerne vil arbejde med React

Hvis du ikke har arbejdet med frameworks før, er Svelte et rigtig godt sted at starte, fordi HTML, CSS og Javascript som førnævnt er separeret, hvilket gør, det er meget nemt at overskue, samtidig med du får en god forståelse for hvad et framework er. React og Vue er nemlig ikke helt så enkelt og logisk opbygget som Svelte.

Men nok om det. Lad os komme igang!

Opsætning af SvelteKit

Det første skridt er at oprette et projekt.

1. Start projektet med:

npm init svelte@next mit-website

2. Vælg muligheden ‘SvelteKit demo app’ og besvar alt med ‘no’.
3. Gå ind i din nye mappe og installer de konfigurerede pakker:

cd mit-website
npm install

4. Vent til all pakkerne er installeret og kør dit projekt med:

npm run dev

For at se din nye applikation skal du gå til http://127.0.0.1:5173/ i din browser. Du vil se en webside, der siger: “Velkommen til SvelteKit”.

Projektstruktur

Det næste trin for projektet er at definere følgende struktur:

• src/lib/ -> Her ligger komponenterne
• src/routes/ -> Router med alle tilgængelige sider
• src/app.css -> Den globale CSS fil
• src/routes/index.svelte -> Forside /
• src/app.html -> Skabelon for hver HTML-side
• static/ -> Statiske ressourcer, som f.eks billeder, der vil blive brugt på hjemmesiden.

Routing

SvelteKit bruger filsystem-baseret routing, hvilket betyder, at alt inde i en rutemappe vil være tilgængeligt via sin egen sti uden behov for manuelt at angive ruter.

Denne webapp har i alt 3 forskellige sider:

• home
• about
• todos

Det betyder, at jeg kan oprette disse sider som beskevet nedenfor, og deres sti vil fungere med det samme:

└── routes # Dette er Routeren
    ├── __layout.svelte
    ├── index.svelte # / - Forside - Home
    ├── about.svelte # /about - Info side.
    └── todos # todos mappe
        └── index.svelte /todos

Som du sikkert har bemærket er /todos en mappe med en index.svelte fil i. Det fungerer ligesågodt, og hjælper til at organisere sin side lidt bedre, hvis man har behøv for det.

Lad os teste om det virker.

Opret en side der hedder test.svelte i mappen routes.

test.svelte

Lav et paragraph-tag og skriv: Dette er kontakt siden - eller hvad du har lyst til at skrive.

<p>Dette er en test side</p>

husk og gem!

Prøv nu at gå til http://127.0.0.1:5173/test

Du skulle gerne få dette resultat:

Dette er en test side

Perfekt! …

Komponenter i Svelte

I Svelte består alle sider og funktioner af komponenter. En komponent er en .svelte-fil, der kan bruges som en hel side eller importeres i ​​enhver anden Svelte-fil. Du kan sende variabler og funktioner til enhver komponent og bruge dem i HTML.

Et komponents opbygning ser typisk sådan her ud:

<script>
	// JavaScript
</script>

// HTML skrives her:
<h1>Dette er mit nye website bygget i Svelte</h1>

<style>
	// CSS
</style>

Den første del indeholder f.eks variabler og funktioner, som du kan bruge. Du kan for eksempel manipulere en list over blogindlæg eller give en komponent flere værdier som du kan bruge i din HTML og vise på en given side.

Den anden del indeholder HTML på din side og definerer layoutet. Du kan bruge alle de forskellige HTML-tags, men du kan også importere forskellige Svelte-komponenter og vise dem på siden.

Den sidste del indeholder komponentens layout. For at bruge den samme CSS flere gange kan du skrive din CSS i den globale css fil src/app.css.

Eksempel

Her et eksempel på, hvordan du overfører en titel til et komponent og hvordan du bruger den i din HTML.

PostCard-komponent:

I src/lib mappen laver vi en PostCard.svelte fil, som ser sådan her ud:

<script>
  export let title; //her en variable med navnet titel
</script>

<h1>{title}</h1>

I test.svelte importerer vi vores nye komponent:

<script>
	import PostCard from '$lib/PostCard.svelte';
</script>

<PostCard title="Hejsa" />

<p>Dette er en test side</p>

Siden skulle gerne have opdateret sig selv med det nye komponent

Med de forskellige funktionaliteter kan du nemt oprette komponenter og sider. I de næste afsnit vil vi gennemgå hvordan vi opretter en landingsside med en header (menubar med navigation), der kan bruges på alle sider, ved at bruge et overordnet layout på alle sider. …

Navigation

I nedenstående eksempel tilføjer vi vores test side til vores navigation i header sektionen:

Gå til src/lib/header/Header.svelte

Og tilføj: <li class:active={$page.url.pathname === '/test'}> <a sveltekit:prefetch href="/test">Test</a>

• til vores nav sektion i header sektionen.

<script>
  import { page } from "$app/stores";
  import logo from "./svelte-logo.svg";
</script>

<header>
	<div class="corner">
		<a href="https://kit.svelte.dev">
			<img src={logo} alt="SvelteKit" />
		</a>
	</div>
	<nav>
		<svg viewBox="0 0 2 3" aria-hidden="true">
			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
		</svg>
		<ul>
			<li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
			<li class:active={$page.url.pathname === '/about'}>
				<a sveltekit:prefetch href="/about">About</a>
			<li class:active={$page.url.pathname === '/test'}>
				<a sveltekit:prefetch href="/test">Test</a>
			</li>
			<li class:active={$page.url.pathname === '/todos'}>
				<a sveltekit:prefetch href="/todos">Todos</a>
			</li>
		</ul>
		<svg viewBox="0 0 2 3" aria-hidden="true">
			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
		</svg>
	</nav>
</header>
<slot></slot>

<style>
	header {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid lightgray;
		padding-left: 4vw;
		padding-right: 4vw;
	}

	nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	h1 {
		margin: 5;
		font-weight: 400;
		font-size: 25px;
	}
</style>

…

layout.svelte

Layout.svelte-filen er et basislayout for alle sider i routeren. Hvilket betyder, at jeg kan have delt kode til alle sider i den fil. I eksemplet nedenfor, har jeg tilføjet sidehoved- og sidefodskomponenterne til layoutet, og indlæser indholdet af selve ruten i <slot>-elementet:

Layoutkomponentet er en måde at skabe elementer, der gentager sig på hver side (f.eks. en navigationsmenu til din web-applikation).

Den normale __layout.svelte-fil i routeren, anvender det definerede layout på hver side i denne og hver underliggende rute.

Hvis du vil fjerne layoutet for en bestemt rute/side, kan du oprette en __layout-test.svelte-fil i root-mappen. Og bruge det nye layout direkte på filen, ved at tilføje @test til filnavnet som vist her: test@test.svelte

<script>
	import '../app.css';
</script>

<main>
	<slot />
</main>

<footer>
	<p>Dette er en ny footer på vores test side</p>
</footer>

<style>
	main {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 1rem;
		width: 100%;
		max-width: 1024px;
		margin: 0 auto;
		box-sizing: border-box;
	}

	footer {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 40px;
	}

	footer a {
		font-weight: bold;
	}

	@media (min-width: 480px) {
		footer {
			padding: 40px 0;
		}
	}
</style>

Eksempel:

└── routes # Dette er Routeren
    ├── __layout.svelte
    ├── __layout-test.svelte # Det nye layout vi kun vil bruge på test siden:
    ├── index.svelte # / - Home
    ├── about.svelte # /about
    ├── test@test.svelte # /test - vores test side med vores nye layout.
    └── todos # todos mappe som rute (todos/index.svelte)
        └── index.svelte

Vi kan også tilføje vores nye layout til en mappe, så alle ruter i den mappe vil arve vores nye layout.

Eksempel:

    ...
    ├── test.svelte # /test - vores test side med vores nye layout.
    └── todos@test # todos mappe som rute (todos/index.svelte)
        └── index.svelte

Smart ik? :))

Et layoutkomponent er en grundlæggende Svelte-fil, der automatisk importeres af routeren. En vigtig del at huske på er, at du skal inkludere <slot></slot> tags. Disse definerer, hvor side indholdet skal inkluderes.

God arbejdslyst med at bygge din nye app.