10+ 个 Svelte 示例 – 组件和模板

本文包含联盟链接；如果您通过本文提供的不同链接购买产品或服务，我可能会获得佣金。

Svelte是一个极具发展潜力且需求旺盛的 JavaScript 框架。它如今越来越受欢迎，开发者们经常将其与 React 和 Vue 等主流框架进行比较。前端开发者社区对 Svelte 的浓厚兴趣，或许源于其处理前端数据变更的全新而又简洁的方法。

如果您还不了解 Svelte，本文将为您简要介绍，帮助您了解它的优势所在。如果您已经熟悉这个 JavaScript 框架，可以直接查看我们精选的 Svelte 组件和模板示例，帮助您快速启动下一个应用项目。

Svelte框架是什么？

Svelte 是一个用于构建交互式网页的前端开源 JavaScript 组件框架。它在GitHub上拥有 36.7k 个 star ，因其速度远超其他库而广受欢迎。其最吸引人的特性之一是能够编译成非常精简的原生 JavaScript 代码。由于它能显著提升网站加载速度，因此对 SEO 非常友好。另一个值得关注的亮点是 Sapper。它是一个优秀的服务器端渲染库，能够显著提升网站速度并优化 SEO。

开发者爱上 SvelteJS 的三大主要优势是：

• 代码更少
• 没有虚拟DOM
• 真正反应

正如 Svelte官网所言，使用 Svelte 能带来卓越的开发者体验。Svelte 在构建时运行，将组件转换为高效的命令式代码，从而精准地更新 DOM。因此，您可以编写性能优异的复杂应用程序。

现在让我们来看看使用这个JS框架的更多优势：

• 这是一个基于组件的框架，无需额外的插件。
• 它能轻松处理状态管理，没有任何常见的困难。
• 它利用了作用域样式，无需使用 CSS-in-JS，因此不需要编辑器扩展或奇怪的语法。
• 它只需要一个简单的构建脚本就能运行。
• 如果你要创建一个基础项目，几乎不需要任何文件。

如果您想尝试一下这个全新的框架，或者您已经在使用它，不妨看看这份优秀的 Svelte 使用示例列表。我们会不断更新，以便您能找到最新、最实用的示例。

Svelte 示例

Argon Dashboard PRO Svelte

下载 |   在线预览|获取主机服务


Argon Dashboard PRO Svelte是一款基于 Bootstrap 4 的精美 Svelte 管理后台，拥有大量组件，设计美观、简洁、有序。如果您正在寻找一款能够管理和可视化业务数据的工具，那么这款后台正是您的理想之选。

它由 200 多个独立组件构成，让您可以自由选择和组合。所有组件都支持颜色变化，您可以使用 Sass 文件轻松修改。由于所有元素都已实现，因此您可以节省大量从原型设计到编写完整功能代码的时间。

Svelte 通知

下载 |   在线预览|获取托管


Svelte Notifications是一个优秀的 Svelte 实验性图表库。它简洁灵活，非常适合极简设计。

煎饼苗条

下载 |   在线预览|获取主机空间


Pancake Svelte是一个适用于 SvelteJS 应用的图表库，它允许您结合 HTML、SVG 以及（即将推出的）Canvas/WebGL 来可视化数据。与大多数图表库不同，Pancake 的设计以服务器端渲染为核心，这意味着您可以创建美观且响应式的图表，甚至无需 JavaScript 即可渲染。

Svelte - Firebase

下载 |   在线预览|获取托管服务


Svelte - Firebase是一个免费模板，可帮助您使用 Svelte 和 Firebase 开发新应用程序。它具有强大的路由系统，支持嵌套布局、公共和私有部分、表单验证，以及预配置的首页、登录、注册等页面。

Svelte 可排序列表

下载 |   在线预览|获取主机空间


Svelte Sortable List是一个 Svelte 3 组件，它实现了一个带有动画拖放功能的列表。它渲染一个可以通过拖放重新排序的项目列表，并为列表中项目的添加/删除/重新排序实现了翻转动画效果。

CL编辑器

下载   实时预览 | |获取主机 


CL- Editor是一款使用 Svelte 和 Typescript 构建的简单轻量级文本编辑器。

纤细滑动

下载 |   在线预览|获取托管服务


Svelte Swipe是一个用于 Svelte 的可滑动项目包装组件。它允许您添加内置指示器和自定义缩略图，并且支持在滑动项目内部添加指针事件。

纤细易剪裁

下载 |   在线预览|获取主机空间


Svelte-Easy-Crop是一个 Svelte 组件，用于通过简单的交互方式裁剪图像。它支持拖放和缩放交互，提供像素和百分比两种裁剪尺寸，并支持任何图像格式（JPEG、PNG 甚至 GIF），支持 URL 或 Base64 字符串格式。

苗条又棒极了

下载 |   在线预览|获取主机


Svelte-Awesome是一个适用于 Svelte 的超棒 SVG 图标组件，使用 Font Awesome 图标构建。

Svelte-Progressbar

下载 |   在线预览|获取托管


Svelte-Progressbar是一个使用 Svelte 3 构建的多系列 SVG 进度条组件。它可以渲染成线性或径向进度条。进度条和数值均支持动画效果。无依赖项，压缩后仅 20kb（gzip 压缩后 6.5kb）。

Svelte-Grid

下载 |   在线预览|获取主机空间


Svelte-Grid是一个响应式、可拖拽、可调整大小的 Svelte 网格布局插件。它具有可拖拽组件、可调整大小的组件、静态组件、响应式断点等诸多功能。

Svelte日历

下载 |   在线预览|获取主机服务


Svelte-Calendar是一款轻量级的日期选择器，具有简洁的动画和独特的用户体验，采用 Svelte 3 构建。它对移动设备友好，并且可以通过键盘使用。

苗条-波普瓦

下载 |   在线预览|获取托管


Svelte-Popover是一个适用于 Svelte 的智能弹出框组件，无需 jQuery，也无需任何第三方依赖。它支持点击、悬停、触摸事件以及动画/过渡效果。此外，它还兼容 Sapper。

最后想说的话

那么，在实际项目中应该使用 Svelte 吗？Svelte 的特性看起来很不错，如果前端开发人员希望更快地构建应用程序，就应该考虑它。它性能出色，最重要的是易于使用。

你目前感觉如何？你试过Svelte吗？