svelte

Übersicht

Svelte ist ein modernes JavaScript-Framework, das die Arbeit vom Browser in die Kompilierzeit verlagert und hochoptimierten Vanilla-JavaScript-Code erzeugt. In Kombination mit SvelteKit bietet es ein Full-Stack-Framework für die Erstellung schneller, effizienter Webanwendungen.

Schnellstart

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

Lokale Entwicklung mit Docker

Wenn Sie Node.js nicht lokal installiert haben, können Sie Docker verwenden, um Svelte-Befehle auszuführen. Das Projekt enthält ein Dockerfile für Produktions-Builds.

Voraussetzungen

Installieren Sie Docker Desktop für Ihr Betriebssystem (Windows, Mac oder Linux).

Befehle mit Docker ausführen

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

# Run development server (accessible at localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:20-alpine npm run dev

# Build for production
docker run --rm -v $(pwd):/app -w /app node:20-alpine npm run build

Projektstruktur

Verstehen Sie, wo sich die Dateien befinden:

├── src/
│   ├── routes/
│   │   ├── +page.svelte          # Startseiten-Komponente
│   │   └── +layout.svelte        # Root-Layout (umschließt alle Seiten)
│   ├── lib/
│   │   ├── index.js              # Gemeinsame Exporte
│   │   └── assets/               # Statische Assets (Bilder usw.)
│   ├── app.html                  # HTML-Template
│   └── app.css                   # Globale Styles (Tailwind)
├── static/                       # Öffentliche statische Dateien
├── svelte.config.js              # SvelteKit-Konfiguration
├── vite.config.js                # Vite-Build-Konfiguration
├── package.json                  # Abhängigkeiten und Skripte
└── Dockerfile                    # Docker-Build-Konfiguration
        

Häufige Aufgaben

Neue Seite erstellen

Erstellen Sie einen neuen Ordner in src/routes/ mit einer +page.svelte-Datei:

# Create an "about" page at /about
mkdir src/routes/about
touch src/routes/about/+page.svelte

Der Ordnername wird automatisch zum URL-Pfad.

Komponente erstellen

Erstellen Sie .svelte-Dateien in src/lib/ für wiederverwendbare Komponenten:

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

Komponenten importieren

Verwenden Sie den $lib-Alias, um aus dem lib-Ordner zu importieren:

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

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

Tailwind CSS verwenden

Tailwind CSS 4 ist vorkonfiguriert. Verwenden Sie Klassen direkt in Ihren Komponenten:

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

Zustandsverwaltung mit Runes (Svelte 5)

Svelte 5 verwendet Runes für Reaktivität:

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

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

Nützliche Befehle

Fehlerbehebung

Deployment-Workflow

Jedes Mal, wenn Sie Code zu Git pushen, wird Ihre Anwendung automatisch gebaut und deployed:

Ihre deployed Anwendungs-URL folgt diesem Format:

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

Beispiel: https://student01-module-a.demo.nstrim.app