< Svelte

Svelte

Szerző: Sallai András

Copyright © Sallai András, 2022

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Kezdés

Webhely:

https://svelte.dev/

Ebben a leírásban a SvelteKit keretrendszert használjuk, ami most lett 1.0. Webhelye:

https://kit.svelte.dev/

Projekt kezdése

npm create svelte@latest app01
cd app01
npm install
npm run dev

Amikor elkészítjük a projektet, nem telepíti a függőségeket. Azt külön paranccsal szükséges telepíteni.

A create parancs kimenete a következőhöz hasonló lehet:

npm create svelte app01
create-svelte version 2.0.1
Welcome to SvelteKit!
✔ Which Svelte app template? › Skeleton project
✔ Add type checking with TypeScript? › Yes, using TypeScript syntax
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Playwright for browser testing? … No / Yes
✔ Add Vitest for unit testing? … No / Yes
Your project is ready!
✔ Typescript
Inside Svelte components, use <script lang="ts">
✔ Prettier
https://prettier.io/docs/en/options.html
https://github.com/sveltejs/prettier-plugin-svelte#options
Install community-maintained integrations:
https://github.com/svelte-add/svelte-adders
Next steps:
1: cd app01
2: npm install (or pnpm install, etc)
3: git init && git add -A && git commit -m "Initial commit" (optional)
4: npm run dev -- --open
To close the dev server, hit Ctrl-C
Stuck? Visit us at https://svelte.dev/chat

Beépített szerver indítása

npm run dev

A --open kapcsoló hatására megnyílik új ablakban.

npm run dev -- --open
> app01@0.0.1 dev
> vite dev --open
Forced re-optimization of dependencies
VITE v4.0.3 ready in 540 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
18:04:38 [vite-plugin-svelte] ssr compile done.
package	files	time	avg
app01	3	38.9ms	13.0ms

Főoldal szerkesztése

Szerkesszük a főoldlat:

editor src/routes/+page.svelte

Routing

A SvelteKit egy fájlrendszer alapú útválasztót használ.

Készítsünk egy /about útvonalat is. Ehhez hozzunk létre a routes könyvtárban egy about könyvtárat. Abban egy +page.svelete nevű fájlt.

Részlet a projekt könyvtárszerkezetéből:

app01/
|-src/
|-routes/
|-about/
| `-+page.svelte
|-+page.svelte

Amikor létrehozunk egy src/routes/about könyvtárat, akkor létrejön egy /about útvonal.

Készítsünk menüt. A két fájl tartalma:

<nav> <a href="/">Főoldal</a> <a href="/about">Névjegy</a> </nav> <h1>Főoldal</h1>
<nav> <a href="/">Főoldal</a> <a href="/about">Névjegy</a> </nav> <h1>Névjegy</h1>

Layout

Készítsünk egy +layout.svelte fájlt a routes könyvtárban. Tegyük bele a navigációs részt valamelyik oldalról. Az oldalakról törölhetjük.

<nav> <a href="/">Főoldal</a> <a href="/about">Névjegy</a> </nav>
<h1>Főoldal</h1>
<h1>Névjegy</h1>

Jelenleg működik a navigáció, de az oldaltartalmak nem jelennek meg.

Most tegyünkegy „slot” taget a +layout.svelte fájlba:

<nav> <a href="/">Főoldal</a> <a href="/about">Névjegy</a> </nav> <slot><slot>

A slot helyére beépül page oldal. Ellenőrizzük a böngészőben.

Akár lábrészt is rakhatunk a slot elemek alá:

<nav> <a href="/">Főoldal</a> <a href="/about">Névjegy</a> </nav> <slot></slot> <footer> Nagy János, 2022-12-25 </footer>

Komponensek

Készítsünk az src könyvtárban egy components könyvtárat. Ebben készítsünk egy Nav.svelte és egy Footer.svelte fájlt. Mozgassuk át a +layout.svelte tartalmát a két fájlba. Értelemszerűen a navigációt a Nav.svelte, a lábrészt a Footer.svelte fájlba.

Részlet a projekt könyvtárfájából:

app01/
|-src/
|-components/
| |-Footer.svelte
| `-Nav.svelte
|-routes/
|-about/
| `-+page.svelte
|-+layout.svelte
|-+page.svelte

<footer> Nagy János, 2022-12-25 </footer>
<nav> <a href="/">Főoldal</a> <a href="/about">Névjegy</a> </nav>

A +layout.svelte fájlban tegyünk egy Nav és egy Footer elemet. A components könyvtárból importálni kell a két elemet.

A +layout.svelte tartalma:

<script> import Footer from "../components/Footer.svelte"; import Nav from "../components/Nav.svelte"; </script> <Nav /> <slot></slot> <Footer />