Aether Design System 使用教程

Aether Design System 使用教程

aether-design-system🔆 Aether serves as the building block for some of my team projects.项目地址:https://gitcode.com/gh_mirrors/ae/aether-design-system

1. 项目介绍

Aether Design System 是一个基于 ts-nextjs-tailwind-starter 构建的设计系统，经过扩展和调整以满足项目需求。Aether 作为我们项目的构建基础，适用于各种项目。该项目使用了以下扩展：

• React Hook Form
• Toast with React Query
• Dialog Manager with Zustand
• NProgress

Aether 是我们实际用于私有项目的设计系统，现在我们决定将其开源。

2. 项目快速启动

2.1 克隆项目

首先，克隆 Aether Design System 项目到本地：

git clone https://github.com/theodorusclarence/aether-design-system.git

2.2 安装依赖

进入项目目录并安装依赖：

cd aether-design-system
npm install

2.3 启动开发服务器

启动开发服务器：

npm run dev

现在，你可以在浏览器中访问 http://localhost:3000 查看项目。

3. 应用案例和最佳实践

Aether Design System 可以用于构建各种类型的项目，包括但不限于：

• 企业内部管理系统
• 电子商务平台
• 博客和内容管理系统

最佳实践包括：

• 根据项目需求调整设计系统的组件和样式
• 使用 React Hook Form 进行表单管理
• 使用 React Query 进行数据获取和管理

4. 典型生态项目

Aether Design System 与以下生态项目兼容：

• Next.js: 用于构建服务器渲染的 React 应用
• Tailwind CSS: 用于快速构建自定义 UI 组件
• Zustand: 用于状态管理
• React Query: 用于数据获取和管理

这些生态项目与 Aether Design System 结合使用，可以大大提高开发效率和项目质量。

aether-design-system🔆 Aether serves as the building block for some of my team projects.项目地址:https://gitcode.com/gh_mirrors/ae/aether-design-system