Stellen Sie Ihre Frage und erhalten Sie einen Resümee des Dokuments, indem Sie diese Seite und den AI-Anbieter Ihrer Wahl referenzieren
Der Inhalt dieser Seite wurde mit einer KI übersetzt.
Den englischen Originaltext ansehenWenn Sie eine Idee haben, um diese Dokumentation zu verbessern, zögern Sie bitte nicht, durch das Einreichen eines Pull-Requests auf GitHub beizutragen.
GitHub-Link zur DokumentationMarkdown des Dokuments in die Zwischenablage kopieren
import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro';
import Since from '/components/Since.astro';
Diese Astro-Integration erlaubt dir serverseitiges Rendering und clientseitige Hydratation von deinen Svelte-Komponenten. Sie unterstützt Svelte 3, 4 und 5 (experimentell).
Installation
Astro verfügt über einen astro add-Befehl, der das Setup offizieller Integrationen automatisiert. Wenn du möchtest, kannst du die Integrationen auch manuell installieren.
Um @astrojs/svelte zu installieren, führe einen der folgenden Befehle in einem neuen Terminal-Fenster aus.
Sollten dir dabei Probleme begegnen, melde sie gerne bei uns auf GitHub und versuche stattdessen die manuelle Installation.
Manuelle Installation
Installiere zuerst das @astrojs/svelte-Paket:
Die meisten Paketmanager installieren auch die zugehörigen Peer-Abhängigkeiten. Wenn du jedoch beim Starten von Astro die Warnung "Cannot find package 'svelte'" (oder eine ähnliche Meldung) erhältst, musst du Svelte manuell installieren:
Wende dann die Integration auf die Datei astro.config.* an, indem du die Eigenschaft integrations verwendest:
Kopieren Sie den Code in die Zwischenablage
import { defineConfig } from 'astro/config';import svelte from '@astrojs/svelte';export default defineConfig({ // ... integrations: [svelte()],});Erste Schritte
Um deine ersten Svelte-Komponenten in Astro zu verwenden, gehe zu unserer UI-Framework Dokumentation. Dort lernst du:
- 📦 wie Framework-Komponenten geladen werden,
- 💧 clientseitige Hydratationsoptionen, und
- 🤝 verschiedene Möglichkeiten, unterschiedliche Frameworks zu mischen
Optionen
Diese Integration wird durch @sveltejs/vite-plugin-svelte ermöglicht. Um den Svelte-Compiler anzupassen, können Optionen für die Integration genutzt werden. Weitere Informationen findest du in der @sveltejs/vite-plugin-svelte-Dokumentation.
Standardoptionen
Diese Integration nutzt die folgenden Standardoptionen für den Svelte-Compiler:
Kopieren Sie den Code in die Zwischenablage
const defaultOptions = { emitCss: true, compilerOptions: { dev: isDev, hydratable: true }, preprocess: vitePreprocess(),};Die Einstellungen für emitCss, compilerOptions.dev und compilerOptions.hydratable sind notwendig, um Astro korrekt zu erzeugen, und dürfen nicht überschrieben werden.
Wenn du eine eigene preprocess-Option verwendest, wird diese den Standard von vitePreprocess() überschreiben. Stelle sicher, dass du die notwendigen Preprocessor-Flags für dein Projekt aktivierst.
Du kannst die Einstellungen der svelte-Integration entweder in der astro.config.mjs-Datei oder in der svelte.config.js-Datei ändern. Beides überschreibt die Standardeinstellung von preprocess:
Kopieren Sie den Code in die Zwischenablage
import { defineConfig } from 'astro/config';import svelte from '@astrojs/svelte';export default defineConfig({ integrations: [svelte({ preprocess: [] })],});Kopieren Sie den Code in die Zwischenablage
export default { preprocess: [],};Intellisense für TypeScript
Wenn du einen Preprocessor wie TypeScript oder SCSS für deine Svelte-Dateien benötigst, kannst du eine svelte.config.js-Datei erstellen, damit die Svelte-IDE-Erweiterung die Svelte-Dateien korrekt analysieren kann.
Kopieren Sie den Code in die Zwischenablage
import { vitePreprocess } from '@astrojs/svelte';export default { preprocess: vitePreprocess(),};Diese Konfigurationsdatei wird automatisch hinzugefügt, wenn du astro add svelte ausführst.