Svelte ​

引言 ​

• 开始项目: 使用 SvelteKit，Svelte 团队的官方应用框架。
• 编辑器工具: 支持 VS Code 扩展和其他编辑器集成。
• 获取帮助: 通过 Discord 聊天室、Stack Overflow 获得支持。

Svelte 组件 ​

• 组件结构: 组件在 .svelte 文件中编写，包含脚本、样式和标记。
• 脚本块: 包含当组件实例被创建时运行的 JavaScript。
• 响应性: 变量的赋值会触发重新渲染。
• 组件属性: 使用 export 关键字创建组件的属性。
• 响应式语句: 使用 $: 前缀来创建响应式语句。

特殊元素和指令 ​

• 元素指令: 使用 on: 监听 DOM 事件，bind: 进行双向数据绑定。
• 存储: 使用 $ 符号访问存储值。
• 过渡和动画: 利用 Svelte 内置的 transition、animate 和 motion 功能。

逻辑和控制结构 ​

• If 块: 使用 {#if ...} 进行条件渲染。
• Each 块: 使用 {#each ...} 渲染列表。
• Await 块: 使用 {#await ...} 处理 Promise。

样式 ​

• 作用域 CSS: 在 <style> 标签中定义的样式仅限于组件内部。
• 全局样式: 使用 :global(...) 修改器应用全局样式。

Svelte 存储 ​

• 存储基础: 创建存储以进行反应式状态管理。
• 可读和可写存储: 适用于不同用例的各种存储类型。

Svelte 编译器 ​

• 自定义元素 API: 定义自定义元素。
• 客户端和服务端 API: 用于客户端和服务端组件的不同 API。

高级概念 ​

• 可访问性警告: 确保可访问性的指南。
• TypeScript 支持: 集成 TypeScript 进行静态类型检查。

迁移指南 ​

• 版本 4 迁移: 迁移到 Svelte 版本 4 的指南。