@astrojs/ svelte
这个 Astro 集成 为你的 Svelte 5 组件启用了渲染和客户端 hydration 功能。如果需要支持 Svelte 3 和 4，请安装 @astrojs/svelte@5。
安装
“安装”部分Astro 包含一个 astro add 命令来自动设置官方集成。如果你愿意，也可以手动安装集成。
要安装 @astrojs/svelte，请在你的项目目录中运行以下命令并按照提示操作
npx astro add sveltepnpm astro add svelteyarn astro add svelte如果你遇到任何问题，请随时在 GitHub 上向我们报告，并尝试下面的手动安装步骤。
手动安装
“手动安装”部分首先，安装 @astrojs/svelte 包
npm install @astrojs/sveltepnpm add @astrojs/svelteyarn add @astrojs/svelte大多数包管理器也会安装相关的对等依赖项。如果你在启动 Astro 时看到 Cannot find package 'svelte'（或类似）的警告，你需要安装 Svelte 和 TypeScript
npm install svelte typescriptpnpm add svelte typescriptyarn add svelte typescript然后，使用 integrations 属性将此集成应用到你的 astro.config.* 文件中：
import { defineConfig } from 'astro/config';import svelte from '@astrojs/svelte';
export default defineConfig({ // ... integrations: [svelte()],});并在项目根目录中创建一个名为 svelte.config.js 的新文件，然后添加以下代码
import { vitePreprocess } from '@astrojs/svelte';
export default { preprocess: vitePreprocess(),}入门
“开始使用”部分要使用你的第一个 Svelte 组件，请前往我们的UI 框架文档。你将了解到
- 📦 框架组件是如何加载的，
- 💧 客户端注入选项，以及
- 🤝 混合和嵌套不同框架的机会
选项
“选项”部分该集成由 @sveltejs/vite-plugin-svelte 提供支持。要自定义 Svelte 编译器，可以向该集成提供选项。更多详情请参阅 @sveltejs/vite-plugin-svelte 文档。
你可以在 astro.config.mjs 中将选项传递给 svelte 集成，或者在 svelte.config.js 中设置。如果两处都存在，astro.config.mjs 中的选项将优先于 svelte.config.js 中的选项。
import { defineConfig } from 'astro/config';import svelte from '@astrojs/svelte';
export default defineConfig({ integrations: [svelte({ extensions: ['.svelte'] })],});export default { extensions: ['.svelte'],};预处理器
“预处理器”部分@astrojs/svelte@2.0.0
如果你在 Svelte 文件中使用 SCSS 或 Stylus，你可以创建一个 svelte.config.js 文件，以便 Svelte 对它们进行预处理，并且 Svelte IDE 扩展可以正确解析 Svelte 文件。
import { vitePreprocess } from '@astrojs/svelte';
export default { preprocess: vitePreprocess(),};当你运行 astro add svelte 时，此配置文件将自动为你添加。有关 vitePreprocess 的更多详情，请参阅 @sveltejs/vite-plugin-svelte 文档。
