SuperAPI AI 工具集

astro-integrations

前端与建站

查看项目

更新于 10-15 21:48

技能介绍

用途:在 Astro 项目中添加 React、Vue、Svelte、Solid、Preact 等 UI 框架集成,或把已有框架应用迁移进 Astro,也支持同一项目内使用多个框架、Web Components(Lit)与基于 signals 的框架。

主要能力:列出各框架对应的集成包,如 React 用 @astrojs/react(需 react + react-dom)、Vue 用 @astrojs/vue(需 vue)、Svelte 用 @astrojs/svelte(需 svelte)、SolidJS 用 @astrojs/solid-js(需 solid-js)、Preact 用 @astrojs/preact;另有 AlpineJS(@astrojs/alpinejs)、Lit(@astrojs/lit)、Qwik(@qwikdev/astro)、Angular(@analogjs/astro-angular,经 AnalogJS)。

使用方式:推荐用 CLI 安装,命令为 npx astro add react、npx astro add vue、npx astro add svelte、npx astro add solid-js、npx astro add preact,CLI 会自动安装依赖并更新 astro.config.ts。技能还规定了一套代理工作流:实现前并行启动三个代理(fuse-ai-pilot:explore-codebase 检查现有集成与 astro.config.ts、fuse-ai-pilot:research-expert 通过 Context7/Exa 核对最新文档、mcp__context7__query-docs 获取配置示例),实现后运行 fuse-ai-pilot:sniper 验证。

最佳实践:优先使用 astro add CLI;按框架分目录(如 src/components/react/、src/components/vue/);多个 JSX 框架需用 include 避免 React/Preact/Solid 冲突;所有框架组件需加 client 指令才能交互;尽量只用单一框架,仅在确有必要时混用以保证性能。

限制:该技能专用于 Astro(框架通过 astro.config.ts 嵌入,而非独立应用),不覆盖组件添加后的 hydration 指令(属 astro-islands)与组件样式(属 astro-styling)。具体版本要求、收费与效果资料暂未提供。