Origin UI - Svelte开源项目最佳实践教程

1、项目介绍

Origin UI - Svelte 是一个基于 Svelte 的 UI 组件库，它提供了大量的可复用的 UI 组件，帮助开发者快速构建应用程序的用户界面。这个项目是从 Origin UI 项目 fork 过来的，使用 Svelte 重写了原有的 Next.js 版本，并引入了一些新的组件和功能。

2、项目快速启动

环境准备

在使用 Origin UI - Svelte 之前，你需要确保你的项目中已经安装了以下依赖：

• Svelte
• TailwindCSS
• Bits UI 或其他依赖（具体依赖请参考 src/lib/constants.ts）

安装项目

1. 克隆项目到本地：

git clone https://github.com/max-got/originui-svelte.git
cd originui-svelte

2. 安装依赖：

pnpm install

开发环境启动

1. 运行开发服务器：

pnpm dev

2. 打开浏览器访问 http://localhost:5173 查看组件预览。

代码质量检查

1. 运行 ESLint 检查代码质量：

pnpm lint

2. 运行 Prettier 格式化代码：

pnpm format

3、应用案例和最佳实践

基础组件使用

1. 从 src/lib/components/ui 文件夹中复制所需的 UI 组件到你的项目中。

2. 根据组件类型调整导入语句。

CSS 变量使用

1. 在你的项目 src/lib/app.css 文件中导入 CSS 变量：

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    /* ... 其他变量 */
  }
}

工具函数和钩子使用

1. 在 src/lib/utils.ts 文件夹中可以找到通用的工具函数，例如 cn 函数用于 TailwindCSS 类合并。

2. 在 src/lib/hooks 文件夹中可以找到通用的 Svelte 钩子。

4、典型生态项目

由于 Origin UI - Svelte 是一个相对较新的项目，目前生态项目还不是很丰富。不过，随着项目的不断发展，相信会有越来越多的项目开始使用和贡献于 Origin UI - Svelte。