Svelte

• Szerző: Sallai András
• Copyright © Sallai András, 2022
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

Webhely:

• https://svelte.dev/

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

• https://kit.svelte.dev/

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

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

Szerkesszük a főoldlat:

editor src/routes/+page.svelte

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:

src/routes/+page.svelte

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

src/routes/about/+page.svelte

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

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.

src/routes/+layout.svelte

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

src/routes/+page.svelte

<h1>Főoldal</h1>

src/routes/about/+page.svelte

<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:

src/routes/+layout.svelte

<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á:

src/routes/+layout.svelte

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

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

src/components/Footer.svelte

<footer>
    Nagy János, 2022-12-25
</footer>

src/components/Footer.svelte

<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:

src/routes/+layout.svelte

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