Im zweiten Teil unserer Blogserie über Svelte fokussieren wir uns auf den Einstieg in die Entwicklung mit Svelte. Wir werden durch den Prozess der Einrichtung der Entwicklungsumgebung führen und Schritt für Schritt erklären, wie man ein neues Svelte-Projekt initialisiert.
Notwendige Tools
Bevor Sie mit der Entwicklung in Svelte beginnen können, müssen einige grundlegende Tools eingerichtet werden. Diese Tools bilden das Fundament, auf dem Sie Ihre Svelte-Anwendungen bauen werden.
- Visual Studio Code (VS Code): VS Code ist ein leistungsstarker und flexibler Editor, der für moderne Webentwicklung optimiert ist. Es bietet eine breite Palette von Extensions und eine intuitive Benutzeroberfläche. [Download VS Code]
- Node.js: Node.js ist eine Laufzeitumgebung, die es Ihnen ermöglicht, JavaScript auf Ihrem Computer auszuführen, nicht nur im Browser. Node.js ist essentiell, um die Pakete, die Svelte benötigt, zu verwalten und auszuführen. [Download Node.js]
- Svelte Extension für VS Code: Diese Extension verbessert die Entwicklungserfahrung, indem sie Auto-Completion, Syntax-Highlighting und weitere hilfreiche Funktionen speziell für Svelte bietet. Sie können diese Extension direkt in VS Code über den Extension-Tab suchen und installieren.
Neues Projekt erstellen
Nachdem Sie Ihre Entwicklungsumgebung eingerichtet haben, ist der nächste Schritt die Initialisierung eines neuen Svelte-Projekts. Hier ist eine einfache Anleitung, die Sie Schritt für Schritt durch den Prozess führt.
- Öffnen Sie Visual Studio Code ⇨ Starten Sie VS Code und öffnen Sie ein neues Terminal im VS Code (View → Terminal).
- Erstellen Sie ein neues Projektverzeichnis ⇨ Geben Sie im Terminal `mkdir MeinSvelteProjekt` ein, um ein neues Verzeichnis zu erstellen. → Wechseln Sie mit `cd MeinSvelteProjekt` in das neue Verzeichnis.
- Initialisieren Sie ein neues Svelte-Projekt ⇨ Führen Sie im Terminal den Befehl `npx degit sveltejs/template svelte-app` aus. Dieser Befehl lädt das offizielle Svelte Template herunter und erstellt ein neues Projekt namens `svelte-app`. → Wechseln Sie den Ordner mit `cd svelte-app`
- Installieren Sie die Abhängigkeiten ⇨ Führen Sie `npm install` aus, um alle erforderlichen Pakete zu installieren, die in der `package.json` des Templates definiert sind.
- Starten Sie den Entwicklungsserver ⇨ Geben Sie `npm run dev` ein, um den lokalen Entwicklungsserver zu starten. Dieser Befehl wird auch automatisch einen neuen Tab in Ihrem Standardbrowser öffnen, der Ihre Svelte-Anwendung anzeigt.
- Öffnen und bearbeiten Sie Ihr Projekt ⇨ Ihr Grundgerüst ist nun fertig. Sie können beginnen, Ihre App-Dateien in VS Code zu öffnen und zu bearbeiten.
Zusammenfassung
Mit diesen Schritten haben Sie erfolgreich Ihre Entwicklungsumgebung für Svelte eingerichtet und ein neues Projekt gestartet. Sie sind jetzt bereit, tiefer in die Entwicklung mit Svelte einzutauchen und Ihre eigenen interaktiven Webanwendungen zu erstellen. Im nächsten Artikel unserer Serie werden wir uns ansehen, wie man Svelte-Komponenten erstellt und wie die Datenbindung in Svelte funktioniert. Bleiben Sie dran!
