# dou-ui 中文文档

规范地址：https://npmcn.com/package/dou-ui/

版本：0\.1\.0-alpha\.0
npm 元数据更新时间：2026-11-03T11:59:50.974Z
中文译文更新时间：2026-11-03T12:34:31.614Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/dou-ui
原文对照：https://npmcn.com/package/dou-ui/?lang=original
项目主页：https://github.com/daidr/dou-ui#readme
源码仓库：https://github.com/daidr/dou-ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：6.3 MB，1874 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：vue ^3\.5\.0
- 首次发布：2026-11-03T11:57:11.940Z
- 最新版本发布：2026-11-03T11:59:50.580Z
- 已发布版本数：2（近 12 个月 2 个）

## 中文简介

为自己打造的 Vue 3 组件库：简洁克制，样式与组件分离，内置无障碍支持

## 安装

```sh
npm install dou-ui
```

也可以使用：`pnpm add dou-ui`、`yarn add dou-ui`、`bun add dou-ui`

## README

# DouUI

为自己打造的 Vue 3 组件库。

-   以黑白灰为主的简洁风格，颜色只用于表达语义；1px 细描边，只有浮起的元素才有层叠阴影
-   样式基于设计 Token，可以整体替换主题，也可以局部覆盖；所有样式都在级联层里，页面上的样式总能覆盖
-   统一的 Props 约定：`variant`、`tone`、`size` 可以任意组合
-   内置无障碍支持，文字对比度按 WCAG AA 取值；提供完整的 TypeScript 类型，支持按需引入

设计取舍见 [设计原则](https://github.com/daidr/dou-ui/blob/main/docs/guide/philosophy.md)，视觉规范见 [视觉语言](https://github.com/daidr/dou-ui/blob/main/docs/guide/visual-language.md)，组件计划见 [路线图](https://github.com/daidr/dou-ui/blob/main/ROADMAP.md)。

UI 设计与组件由内部组件库演化而来，代码由 Claude Code 与 Codex 编写。文档见 [ui.daidr.me](https://ui.daidr.me/)。

> 仍处于早期阶段：`1.0.0` 之前，次版本号（`0.x.0`）的变化可能包含不兼容的改动，变化记录在 [更新日志](https://github.com/daidr/dou-ui/blob/main/CHANGELOG.md)。

## 安装

```sh
bun add dou-ui
```

需要 Vue 3.5 及以上。样式用到了级联层、`color-mix()` 等特性，面向近两年的主流浏览器。

## 使用

### 全量引入

```ts
import { createApp } from 'vue'
import DouUI from 'dou-ui'
import 'dou-ui/style.css'
import App from './App.vue'

createApp(App).use(DouUI).mount('#app')
```

### 按需引入

组件从 `dou-ui` 具名导入，打包工具会摇掉没有用到的部分。样式按组件引入，会自动带上它内部用到的组件的样式：

```ts
import { DouSelect } from 'dou-ui'
import 'dou-ui/components/select/style'
```

也可以用 `@dou-ui/resolver` 配合按需组件插件自动导入，详见 [快速开始](https://github.com/daidr/dou-ui/blob/main/docs/guide/getting-started.md)。

### 主题

内置亮色与暗色主题。给任意元素加上 `data-dou-theme` 即可切换这棵子树的主题：

```html
<html data-dou-theme="dark"></html>
```

Token 都是 CSS 变量，可以直接覆盖，也可以用 `@dou-ui/theme` 的 `defineTheme` 生成一整套主题，详见 [主题与 Token](https://github.com/daidr/dou-ui/blob/main/docs/guide/theming.md)。

## 包

| 包 | 内容 |
| --- | --- |
| `dou-ui` | 组件，附带全量样式 `style.css` |
| `@dou-ui/theme` | 设计 Token、主题 API 与全部样式 |
| `@dou-ui/icons` | 线性图标库，可以单独使用 |
| `@dou-ui/resolver` | 按需自动导入的解析器 |

四个包使用同一个版本号，一起发布。

许可证：MIT

## 常见问题

### dou-ui 是什么？

为自己打造的 Vue 3 组件库：简洁克制，样式与组件分离，内置无障碍支持

### 如何安装 dou-ui？

在项目目录运行 npm install dou-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.5\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### dou-ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### dou-ui 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### dou-ui 可以商用吗？

dou-ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### dou-ui 还在维护吗？

最新版本 0\.1\.0-alpha\.0 发布于 2026/11/03（今天）；至今共发布 2 个版本，其中过去 12 个月发布了 2 个；首次发布于 2026/11/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。