svelte

Áttekintés

A Svelte egy modern JavaScript keretrendszer, amely a munkát a böngészőből a fordítási időbe helyezi át, így rendkívül optimalizált vanilla JavaScript-et állít elő. A SvelteKit-tel kombinálva teljes értékű full-stack keretrendszert biztosít gyors, hatékony webalkalmazások építéséhez.

Gyors kezdés

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>

npm install

npm run dev

npm run build
git add .
git commit -m "Initial setup"
git push origin main

Helyi fejlesztés Dockerrel

Ha nincs helyben telepített Node.js, használhatja a Dockert a Svelte parancsok futtatásához. A projekt tartalmaz egy Dockerfile-t a production buildekhez.

Előfeltételek

Telepítse a Docker Desktop-ot az operációs rendszeréhez (Windows, Mac vagy Linux).

Parancsok futtatása Dockerrel

# npm install futtatása
docker run --rm -v $(pwd):/app -w /app node:20-alpine npm install

# Fejlesztői szerver futtatása (elérhető a localhost:4200 címen)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:20-alpine npm run dev

# Production build készítése
docker run --rm -v $(pwd):/app -w /app node:20-alpine npm run build

Projekt struktúra

A fájlok elhelyezkedésének megértése:

├── src/
│   ├── routes/
│   │   ├── +page.svelte          # Kezdőlap komponens
│   │   └── +layout.svelte        # Gyökér layout (minden oldalt körbevesz)
│   ├── lib/
│   │   ├── index.js              # Megosztott exportok
│   │   └── assets/               # Statikus eszközök (képek, stb.)
│   ├── app.html                  # HTML sablon
│   └── app.css                   # Globális stílusok (Tailwind)
├── static/                       # Nyilvános statikus fájlok
├── svelte.config.js              # SvelteKit konfiguráció
├── vite.config.js                # Vite build konfiguráció
├── package.json                  # Függőségek és scriptek
└── Dockerfile                    # Docker build konfiguráció
        

Gyakori feladatok

Új oldal létrehozása

Hozzon létre egy új mappát a src/routes/ mappában egy +page.svelte fájllal:

# "about" oldal létrehozása a /about útvonalon
mkdir src/routes/about
touch src/routes/about/+page.svelte

A mappa neve automatikusan az URL útvonallá válik.

Komponens létrehozása

Hozzon létre .svelte fájlokat a src/lib/ mappában újrafelhasználható komponensekhez:

<!-- src/lib/Button.svelte -->
<script>
  let { label, onclick } = $props();
</script>

<button class="bg-blue-500 text-white px-4 py-2 rounded" {onclick}>
  {label}
</button>

Komponensek importálása

Használja a $lib aliast a lib mappából történő importáláshoz:

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

<Button label="Click me" onclick={() => alert('Hello!')} />

Tailwind CSS használata

A Tailwind CSS 4 előre konfigurálva van. Használja az osztályokat közvetlenül a komponensekben:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Állapotkezelés Runes-szal (Svelte 5)

A Svelte 5 runes-t használ a reaktivitáshoz:

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<button onclick={() => count++}>
  Count: {count} (doubled: {doubled})
</button>

Hasznos parancsok

Hibaelhárítás

Telepítési munkafolyamat

Minden alkalommal, amikor kódot push-ol a Git-be, az alkalmazás automatikusan lefordul és telepítésre kerül:

A telepített alkalmazás URL-je a következő formátumot követi:

https://<your-subdomain>-<repo-name>.<session-domain>

Példa: https://student01-module-a.demo.nstrim.app