# @aragon/ui 中文文档

规范地址：https://npmcn.com/package/%40aragon/ui/

版本：1\.9\.3
npm 元数据更新时间：2025-05-09T12:19:33.184Z
中文译文更新时间：2026-11-06T13:32:12.810Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：7.3 MB，1454 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- Node.js 要求：\>=12\.0\.0
- 运行依赖：19 个
- peer 依赖：react ^16\.3\.1，react-dom ^16\.3\.1，styled-components \>=4\.0\.0
- 首次发布：2017-10-11T19:16:14.815Z
- 最新版本发布：2021-10-22T16:31:17.601Z
- 近 30 天下载量：4201（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：102（近 12 个月 0 个）

## 中文简介

![aragonUI](https://user-images.githubusercontent.com/36158/53582039-04dd2d00-3b7f-11e9-8460-803ed3b84cc6.png)

## 安装

```sh
npm install @aragon/ui
```

也可以使用：`pnpm add @aragon/ui`、`yarn add @aragon/ui`、`bun add @aragon/ui`

## README

![aragonUI](https://user-images.githubusercontent.com/36158/53582039-04dd2d00-3b7f-11e9-8460-803ed3b84cc6.png)

## 概览

aragonUI是用于为阿拉贡及其相关工程构建用户界面的React库. 它提供了建立感觉与阿拉贡生态系统融合的经验所需的组件,可以同时被客户端或服务器端所使用.

完整的文件可在 [阿拉贡UI网站](https://ui.aragon.org/)。 。 。 .

## 开始

如果你对AragonUI不熟悉,我们建议你从 [正在启动页面](https://ui.aragon.org/getting-started/)如果您只想知道如何在您的项目中添加 AragonUI, 请查看快速设置 :

### 快速设置

从 npm 安装 aragonUI 和样式组件 :

```sh
npm install --save @aragon/ui styled-components
```

将其资产复制到您的公共目录 :

```sh
npx copy-aragon-ui-assets ./public
```

将您的应用程序与 `Main` 组件 :

```jsx
import React from 'react'
import { Main } from '@aragon/ui'

function App() {
  return (
    <Main>
      <h1>Hello aragonUI!</h1>
    </Main>
  )
}
```

_你的项目现在准备使用AragonUI_

打开 [https://ui.aragon.org/ (中文(简体) )](https://ui.aragon.org/) 以查看可用的组件列表并学习如何使用这些组件.

### 资产

aragonUI需要一些资产(例如字体)才能正常工作. 这些需要复制,以便图书馆访问,例如: `public/` 使用 [创建反应应用](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-assets-outside-of-the-module-system)。 。 。 .

使用提供的资产复制这些资产 `copy-aragon-ui-assets` 命令 :

```sh
npx copy-aragon-ui-assets ./public
```

默认情况下,它将创建一个名为 `aragon-ui` 在指定的目录中.

该安放地点通过联合国图书馆通知图书馆 `<Main>` 组件。 默认路径是 `./aragon-ui/`,但可以使用 `assetsUrl` 道具 :

```jsx
import { Main } from '@aragon/ui'

const App = () => (
  <Main assetsUrl="http://example.com/aragon-ui-assets/">
    <h1>Hello aragonUI!</h1>
  </Main>
)
```

您可能也想要添加它作为您项目的一个建设步骤, 这样可以升级 aragonUI 而不必担心这一点.

```json
"scripts": {
  "sync-assets": "copy-aragon-ui-assets ./public",
  "build": "npm run sync-assets && react-scripts build",
  "start": "npm run sync-assets && react-scripts start"
}
```

见 `copy-aragon-ui-assets -h` 更多信息.

## 构建和开发

请看一下 [捐款额](https://npmcn.com/package/%40aragon/ui/CONTRIBUTING.md)。 。 。 .

## 使用aragonUI的项目

-   [阿拉贡客户端](https://github.com/aragon/aragon) 财务报告和审定财务报表 [核心应用程序](https://github.com/aragon/aragon-apps)
-   [奥塔克的开放企业](https://www.autark.xyz/apps)
-   [1 Hive 的 Dandelion 应用程序](https://github.com/1Hive/dandelion-template)
-   [阿拉贡·布莱克的筹款](https://fundraising.aragon.black/)
-   [泛语](https://github.com/pandonetwork/pando)
-   [P2P 模型 维基](https://github.com/P2PModels/wiki)
-   [网络基金会拍卖App](https://github.com/cybercongress/aragon-auction-app)
-   [人类的阿皮亚里](https://github.com/1Hive/apiary)
-   [Uniswap Aragon 应用程序](https://github.com/empowerthedao/uniswap-aragon-app)
-   [复合Aragon App](https://github.com/empowerthedao/compound-aragon-app)
-   [阿拉贡议会](https://github.com/PeterMPhillips/aragon-parliament)
-   [阿拉贡市场](https://github.com/proofoftom/aragon-market)

## 许可证

麻省理工学院,看 [自由主义](https://npmcn.com/package/%40aragon/ui/LICENSE)。 。 。 .

## 常见问题

### 如何安装 @aragon/ui？

在项目目录运行 npm install @aragon/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.3\.1）、react-dom（^16\.3\.1）、styled-components（\>=4\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 copy-aragon-ui-assets，可以用 npx copy-aragon-ui-assets 直接运行。

### @aragon/ui 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/aragon\_\_ui 是否存在。

### @aragon/ui 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @aragon/ui 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=12\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @aragon/ui 可以商用吗？

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

### @aragon/ui 的下载量有多少？

根据 npm 官方下载统计，@aragon/ui 在 2026/10/07 – 2026/11/05 这 30 天内被下载 4,201 次，日均约 140 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aragon/ui 还在维护吗？

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