免费移动 web UI 组件库——STDF的基本用法

STDF是一个移动UI组件库，主要用于开发移动web应用。与我之前介绍的很多Vue组件库不同，STDF是基于新开发的js框架Svelte开发的，这是一个类似于Vue/React的JavaScript框架，也就是说这个组件库是专门为Svelte打造的。

免费开源说明：

STDF 是一款基于 Svelte 和 Tailwind CSS 开发的移动端 web UI 组件库，源码基于 MIT 开源协议托管在 Github 上，而 Svelte 和 Tailwind CSS 同样是 MIT 开源项目，所以我们可以免费用于商业项目，也可以二次开发。

STDF 的技术特性：

1、简单：使用 Svelte 语法编码简洁迅速。组件源码逻辑清晰、简单易懂、中英注释详细，查看源码、修改逻辑也可以得心应手
2、轻量：源码体积小巧，无三方依赖。基于 Svelte 与 Tailwind 编译产出的代码在体积上也优势明显，这在移动端显得尤为重要
3、设计优雅：针对移动设备优化设计与交互，使用友好、高效、灵活。支持通过简单配置定制颜色系统、圆角风格、亮暗模式等
4、快速：无运行时，无虚拟 DOM，无烦杂的 CSS 代码，状态管理简单轻快。编码过程、编译处理、线上运行都快了起来

组件列表

通用组件（5）

按钮 Button
底部浮窗 BottomSheet
图标 Icon
遮罩 Mask
弹出层 Popup

布局（4）

分割线 Divider
网格 Grids
占位符 Placeholder
骨架屏 Skeleton

导航（6）

索引栏 IndexBar
导航栏 NavBar
分页 Pagination
步骤条 Steps
标签栏 TabBar
标签页 Tabs

数据输入（11）

动作面板 ActionSheet
异步选择器 AsyncPicker
日历 Calendar
复选框 Checkbox
输入框 Input
选择器 Picker
单选框 Radio
评分 Rate
滑块 Slider
开关 Switch
时间选择器 TimePicker

信息展示（7）

头像 Avatar
徽标 Badge
单元格 Cell
通告栏 NoticeBar
进度条 Progress
进度环 ProgressLoop
轮播 Swiper

反馈（4）

对话框 Dialog
加载 Loading
弹框 Modal
轻提示 Toast

STDF 轻松上手：

在已有配置好 Svelte 与 Tailwind 的工程的情况下，我们可以直接安装：

npm i stdf -D 
# 或者
pnpm i stdf -D

然后在 Svelet 中使用：

<script>
import { Button } from 'stdf';
</script>
<Button>默认</Button>

更详细的使用方法，可以查看 STDF 官网的文档，文档和代码例子写得很详细易懂。

Svelte 和 Vue 对比的几个主要特点：

1、性能：Svelte 通过编译时直接转换为较为精简的 JavaScript 代码，避免了运行时的虚拟 DOM 操作，所以在性能上更胜一筹。Vue 需要运行时的虚拟 DOM
2、大小：Svelte 生成的代码体积更小，对页面加载速度影响较小。Vue 的运行时库还是有一定代码量的
3、编程方式：Svelte 更类似于编译型语言，在编写组件时就确定好了模板、逻辑和样式。Vue 属于典型的 MVVM 框架,需要在组件选项中配置模板、逻辑和样式
4、学习难度：Svelte 的 API 更少，语法更简单直接,上手较快。Vue 具有更完整的框架功能，学习曲线更陡峭
5、生态：Vue 的生态更加丰富成熟，组件、工具、资源等支持都更多。Svelte 生态还在增长中
6、兼容性：Vue 可以兼容到 IE11，兼容性更好。而 Svelte 需要较新版本浏览器

目前支持以下语言：

进入STDF官网