超棒的Svelte

⚡ 精心策划的Svelte资源列表

Svelte是一种构建Web应用程序的新方法。它是一个编译器，将你的声明式组件转换为高效的JavaScript代码。

欢迎贡献。通过拉取请求添加链接或创建问题以开始讨论。

资源
- 官方资源
- 社区
- 会议
- 播客
- YouTube频道
- 教程
- 研究
集成
- 预处理
- 移动端
UI库
UI组件
- 表格
- 通知
- 网格
- 图标
- 日历
- 地图
- 表单
- 图表
- 其他
脚手架
- 客户端
- 通用
实用工具
- 动画
- 表单
- WebGL
- PWA
- 门户
- 字体
- 国际化
路由
框架
开发工具
- 代码检查
- 文档
- 测试
- 编辑器

资源

官方资源

YouTube频道

教程

Svelte 3入门 - DigitalOcean。
使用Svelte和TypeScript开发完整应用程序 - MDN Web文档。
Actions简介 - Svelte学校。
Svelte初学者教程 - The Net Ninja (YouTube)。
Sapper教程（速成课程） - The Net Ninja (YouTube)。
SvelteJS系列 - 教程和讲座 - SpinSpire (YouTube)。
Svelte Stores - @lihautan (YouTube)。
Svelte Actions - @lihautan (YouTube)。
Svelte 101 - @lihautan (YouTube)。
通过构建习惯追踪应用学习Svelte - RadDevon。
认识Svelte 3，一个强大甚至激进的JavaScript框架 - SitePoint，由Chrome DevTools工程师@Jack_Franklin撰写。
使用SvelteKit创建你的博客 - @zhuzilin (Github)。
Typescript + Svelte速查表 - Svelte和SvelteKit所有TypeScript相关主题的概览 - @ivanhofer (Github)。
多个付费Svelte/Sveltekit教程 - LevelUpTutourials
多个免费Svelte教程 - Joy Of Code
多个免费Sveltekit教程 - Joy Of Code
使用AuthJS和Sveltekit 2.0设置身份验证 - @bradcypert (YouTube)

研究

关于Svelte框架的研究和调查。

SvelteScaling - Svelte能扩展吗？
它能扩展吗？ - 寻找Svelte的拐点。
JavaScript框架性能比较 - Svelte和其他顶级JavaScript框架的性能。

集成

预处理

svelte-preprocess - 用于 PostCSS、SCSS、Less、Stylus、Coffeescript、TypeScript、Pug 等的预处理器。
MDSveX - MDX markdown 的预处理器。
svelte-preprocess-markdown - 使用 markdown 语法编写 Svelte 组件。
svelte-preprocess-less - Less 预处理器。
modular-css - 支持 modular-css 的预处理器。
svelte-preprocess-postcss - 在 Svelte 组件中使用 PostCSS 预处理样式。
svelte-preprocess-sass - Sass 预处理器。
svelte-switch-case - Svelte 的 switch case 语法。

移动端

移动端 UI 框架。

Svelte Native - 通过 Nativescript 使用 Svelte 控制原生组件。
Framework7 - 用于构建 iOS 和 Android 应用的全功能 HTML 框架。
Capacitor - 使用 Web 技术和 Svelte 构建原生移动应用。

状态管理库

Svelte-Domain - Svelte 的状态管理库。
svelte-asyncable - 支持异步值的 Svelte store 契约。
exome - 用于深度嵌套状态的简单代理状态管理器。

UI 库

AgnosticUI - 可访问的 Svelte 组件原语（也适用于 React、Vue 3 和 Angular）。
Flowbite Svelte - 使用 Tailwind CSS 和 Flowbite 构建的开源 Svelte UI 组件。
Sveltestrap - Bootstrap 4 & 5 组件。
Smelte - 使用 Tailwind CSS 构建的带有 Material 组件的 UI 框架。
Svelte Material UI - Material UI 组件。
carbon-components-svelte - IBM Carbon 设计系统的 Svelte 实现。
Melt UI - 一组可访问、可重用和可组合的无头组件构建器和实用工具。
Radix Svelte - Radix UI Primitives 的非官方社区主导的 Svelte 移植版。
attractions - 一个非常酷和现代的 UI 套件。
svelte-chota - 基于轻量级 CSS 框架 Chota 构建的组件库。
ionic-svelte - Svelte 与 Ionic UI 的集成，用于移动应用开发，包括多个入门模板。
Svelte UI - SvelteUI 是一个全面的 Svelte 库。
YeSvelte - YeSvelte 是基于 Bootstrap CSS 构建的灵活的 Svelte UI 组件库。
Skeleton - Skeleton 使用 Tailwind 实用类和设计系统轻松创建可主题化的用户界面。
Svelte UX - 用于构建高度交互应用的大型组件、动作、存储和实用工具集合。
STDF - 基于 Svelte 和 Tailwind 的移动端 Web 组件库。
M3 Svelte - 实现 Material Design 3 的健壮组件库。
AgnosUI - 高度可配置的框架无关无头组件库。
daisyUI - Tailwind CSS 最流行的组件库 - daisyUI 为 Tailwind CSS 添加了组件类名，让你能够更快地创建漂亮的网站。
SVAR Core for Svelte - 用于构建快速、交互式和响应式 Web 应用的 20 多个 Svelte UI 组件集合。

UI 组件

表格

表格和数据网格。

svelte-simple-datatables - Svelte 的数据表组件。
svelte-table - 允许排序和过滤的表格实现。
svelte-generic-crud-table - 用于对象数组的通用 Web 组件，具有 CRUD 功能。可排序和调整列大小。每页可有多个表格。
svelte-generic-table-pager - 带分页器的 svelte-generic-crud-table。

通知

吐司/snackbar - 通过无模式临时小弹窗通知用户。

svelte-notifications - 可在任何 JS 应用中使用的吐司通知组件。
svelte-favicon-badge - 一个自定义组件，添加 favicon 和徽章，可用于显示未读消息数等。
@zerodevx/svelte-toast - 简单优雅的吐司通知。
svelte-french-toast - 受 React Hot Toast 启发的 Svelte 流畅吐司通知。轻量、可定制，默认外观漂亮。
svelte-sonner - 一个固执己见的 Svelte 吐司组件。

网格

svelte-grid-responsive - 受 Bootstrap 启发的响应式网格系统。
svelte-flex - 一个简单且可重用的 Svelte flexbox 组件。

图标

svelte-fa - 小巧的 FontAwesome 5 组件。
svelte-simple-icons - Simple Icons 组件。
svelte-awesome - 基于 Font Awesome 图标构建的出色 SVG 图标组件。
svelte-icons - 图标组件。
svelte-heroicons - Tailwind CSS 创建者制作的图标。
svelte-icomoon - 使 Svelte 项目中使用 SVG 图标变得非常简单。
svelte-unicons - 基于 @iconscout/unicons 的 Svelte Unicons svg 图标。

日历

在日历中显示不可编辑的事件。

svelte-fullcalendar - FullCalendar的组件封装。
svelte-calendar - 一个轻量级日期选择器，具有精美的动画和独特的用户体验。
date-picker-svelte - Svelte的日期和时间选择器，具有清晰的用户体验。

地图

svelte-googlemaps - Google Maps组件。
svelte-mapbox - MapBox地图和自动完成组件。
leaflet-svelte - Leaflet的Svelte封装。
esri-svelte - 展示如何在Svelte中使用ArcGIS API for JavaScript的Web应用程序。

表单

让用户创建和编辑数据。

复选框

开关 / 开/关切换 / 复选框。

svelte-checkbox - 一个复选框组件（酷炫动画，可自定义）。
svelte-toggle - 带样式的基本切换组件。

图表

svelte-frappe-charts - frappe-charts的Svelte绑定。
Layer Cake - 一个用于创建可重用图形的Svelte框架。
LayerChart - 基于Layer Cake构建的大量可组合Svelte组件，用于创建各种可视化效果。

其他

svelte-tree-viewer - 一个轻量级组件，用于渲染树状视图。
svelte-copyright - 一个用于格式化和显示版权声明的Svelte组件。
svelte-splitpanes - 功能齐全的可调整大小的视图面板。
mathjax-svelte - MathJax的Svelte组件。
svelte-stepper - 一个用于构建动画步骤流程的Svelte组件。
css-3d-progress - 3D进度条组件。

脚手架

模板 / 样板 / 入门套件 / 技术栈集成 / Yeoman生成器。

create-vite - 为vite + svelte应用生成脚手架。
create-svelte - 用于创建新SvelteKit项目的CLI工具。
component-template - 用于构建可共享组件的基础模板。
svelte-pwa-template - 基于官方模板的PWA启动模板。

实用工具

动画

AutoAnimate - 一个零配置、即插即用的动画工具，为您的Svelte应用添加流畅的过渡效果。
svelte-typewriter - 一个简单且可重用的打字机效果，适用于您的Svelte应用。

表单

svelte-forms-lib - 一个轻量级的表单管理库。
Superforms - SvelteKit库，用于处理服务器和客户端验证，以及表单的客户端显示。
felte - 可扩展的表单库，内置Yup、Zod、Vest和Superstruct验证。
vest - 🦺 受单元测试启发的声明式表单验证框架。
svelte-formly - 一个很好的解决方案，用于使用核心和自定义规则生成和控制动态表单，并支持自定义样式。
svelte-form-builder - 为Svelte构建的无代码拖放式表单构建器。
Formsnap - 基于Superforms和Zod构建的高级Svelte表单组件。

WebGL

svelthree - 用于声明式构建响应式和可重用three.js场景图的组件库。
threlte - three.js的Svelte封装。

PWA

SvelteKit-Adapter-Versioned-Worker - 一个易于使用的service worker构建插件，无需担心缓存持续时间。

门户

svelte-portal - 用于在父组件DOM之外渲染的组件。
svelte-teleport - 用于在DOM中传送元素的组件。

字体

svelte-web-fonts/google - 用于轻松加载Google Fonts API字体的小型组件，包括自动完成功能。

国际化

svelte-fluent - 用于轻松集成Fluent本地化的组件。
svelte-i18n - Svelte的国际化库。
VoerkaI18n - 适用于Javascript/Typescript/Vue/React/Solidjs/SvelteJs/ReactNative的国际化解决方案。
sveltekit-i18n - 用于在SvelteKit中集成i18n样式本地化。
@tolgee/svelte - 基于Web的本地化工具，使用户能够直接在他们开发的Svelte应用中进行翻译。