快速开始
让我们在 5 分钟内创建一个 DUI 应用。
1. 初始化项目
如果你是新项目,推荐使用官方脚手架:
npx create-dui@latest my-app
cd my-app
npm install
npm run dev 2. 手动集成
如果你想在现有项目中添加 DUI:
import { Button, Card, Input } from '@dui/react';
import '@dui/core/dist/style.css';
export default function App() {
return (
<div className="container">
<Card>
<h2>欢迎使用 DUI</h2>
<Input placeholder="输入内容…" />
<Button variant="primary">提交</Button>
</Card>
</div>
);
} 3. 配置主题(可选)
在 src/styles/dui.css 中自定义主题:
:root {
--dui-primary: #8b5cf6;
--dui-radius-md: 16px;
--dui-shadow: 0 10px 25px rgba(0,0,0,0.1);
} 4. 启动开发服务器
npm run dev 访问 http://localhost:3000,你的 DUI 应用就跑起来了!