SuperAPI AI 工具集

svelte-development

前端与建站

查看项目

更新于 10-16 00:05

技能介绍

用途:该技能为构建现代 Svelte 应用提供系统指导,涵盖 Svelte 5 响应式 runes、组件、stores、生命周期钩子、过渡与动画,内容基于官方 Svelte 文档。

主要能力:

  1. 响应式 runes:$state 声明响应式状态,$derived 计算派生值,$effect 处理副作用与清理,$props 定义类型安全的组件属性。
  2. 组件:单文件组件结构,包含 script、markup 与默认作用域样式;支持 props、事件派发(createEventDispatcher)、插槽与组合(含具名插槽与 svelte:fragment)。
  3. Stores:writable、readable、derived 三种 store,支持自定义 store 方法、多 store 派生与自动订阅($ 前缀)。
  4. 生命周期钩子:onMount、onDestroy、beforeUpdate、afterUpdate、tick,用于数据获取、清理与 DOM 更新后操作。
  5. 过渡与动画:内置 fade、fly、slide、scale、blur,支持 in/out 分离、自定义过渡函数、flip 动画与 crossfade 延迟过渡。

使用方式:在构建高性能 Web 应用、SPA、交互式界面、嵌入式组件、实时仪表盘、PWA、组件库或 SvelteKit 服务端渲染应用时启用该技能;也可用于从虚拟 DOM 框架迁移到编译式方案。

适用场景:需要最小 JavaScript 开销、编译时优化、小体积 bundle 与原生响应式的项目。

限制:资料未提供安装命令、收费信息、平台支持范围或具体版本要求;部分示例代码在资料中被截断,未完整展示。