# @duetds/components 中文文档

规范地址：https://npmcn.com/package/%40duetds/components/

版本：10\.8\.3
npm 元数据更新时间：2026-11-10T08:05:29.194Z
中文译文更新时间：2026-11-12T23:59:14.449Z
软件包许可：SEE LICENSE IN LICENSE\.md

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

原始 npm 页面：https://www.npmjs.com/package/%40duetds/components
原文对照：https://npmcn.com/package/%40duetds/components/?lang=original

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

- 包体积（解压后）：14 MB，821 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2019-03-14T08:03:40.821Z
- 最新版本发布：2026-11-10T08:05:28.965Z
- 近 30 天下载量：20382（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：704（近 12 个月 51 个）

## 中文简介

这个软件包包括Dutet Design System Web组件和相关公用事业.

## 安装

```sh
npm install @duetds/components
```

也可以使用：`pnpm add @duetds/components`、`yarn add @duetds/components`、`bun add @duetds/components`

## README

[![Build Status](https://lt-devtool.visualstudio.com/Duet%20Design%20System/_apis/build/status/Duet%20Design%20System?branchName=master)](https://lt-devtool.visualstudio.com/Duet%20Design%20System/_build/latest?definitionId=58&branchName=master) [![Version](https://img.shields.io/npm/v/@duetds/components.svg?style=flat-square&label=components)](https://www.npmjs.com/package/@duetds/components)

# 二重奏组件

这个软件包包括Dutet Web组件和相关工具.

## 使用量

关于使用说明,请参见 Dutit 设计系统 [文档](https://www.duetds.com/using-components/)。 。 。 .

## 建筑

此软件包由 [Stencil.js (英语)](http://stenciljs.com/),用于构建网络组件的编译器和工具链。 组件源代码用TypeScript + JSX (TSX)来写,样式表用SCSS来写.

## 发展

以下是开发过程中最常用的命令:

-   `npm start` - 编译组件,开始监视变化,启动本地开发服务器
-   `npm test` - 编译组件,开始观察变化,开始本地开发服务器并运行测试.

本地开发服务器起始于 `npm start` 或者说 `npm test` 为位于 `/src/prototypes/`。任何本地修改或新组件都可以在本页面上找到,因此开发时可以将其作为试验地.

在那个页面上也可以按 `ctrl + p` 以选择要操作的任何组件固定装置.

### 如何开发新组成部分

1.  创建组件文件
    1.  添加组件目录 `src/components/[component-name]`
    2.  添加 `[component-name].tsx`
    3.  添加 `[component-name].scss`
    4.  添加 `[component-name].e2e.ts`
    5.  添加 `readme.md`
2.  执行组件
3.  写作测试
4.  写读取器
    1.  为文件添加信息
    2.  添加综合实例
5.  测试两者的主题 `default` 财务报告和审定财务报表 `turva`
6.  浏览器测试
7.  无障碍测试,之后 [二重奏无障碍核对表](https://www.duetds.com/accessibility/)
8.  测试SSR
9.  添加以下内容到 `docs/`数字 :
    1.  在组件页面上列出的 SVG 图标
    2.  添加为 `changelog.md`

### 文件和实例

-   显示于 [二重奏.com (简体中文)](https://www.duetds.com/) 作为我们的主要发展平台。 要从本地开始, 打开 `/docs/` 目录和运行 `npm install` 财务报告和审定财务报表 `npm start`。 。 。 .
-   一旦服务器启动并运行,您就可以访问本地开发环境,将浏览器指向 [http://localhost:8000 (英语)](http://localhost:8000/)。文档中的组件部分此时将空出.
-   下一个,去 `/packages/components/` 目录和运行 `npm install` 财务报告和审定财务报表 `npm start` 启动组件监视并构建任务.
-   如果你现在打开任何一个 `*.tsx`, (中文(简体) ), `*.scss`,或 `readme.md` 下方的文件 `/packages/components/src/components/` 并点击保存,这将触发重建任务,同时将必要的更改复制到运行在本地文档中 [http://localhost:8000 (英语)](http://localhost:8000/)。 。 。 .
-   编辑 `*.tsx` 财务报告和审定财务报表 `*.scss` 文件将生成一个新的 JavaScript 捆绑,同时编辑 `readme.md` 文件只生成和复制文档和组件使用示例.
-   在研究新的组件或编辑现有组件时,确保跟踪我们 [代码样式指南](https://npmcn.com/dev-standards/) 参见准则部分.
-   构成部分变异实例存在于每个构成部分 `readme.md`,而组件模板位于 `/docs/src/templates/` 目录.

## 版权

版权:"2023 Local Tapiola/Turva".

## 常见问题

### @duetds/components 是什么？

这个软件包包括Dutet Design System Web组件和相关公用事业\.

### 如何安装 @duetds/components？

在项目目录运行 npm install @duetds/components，或使用 pnpm add / yarn add / bun add。

### @duetds/components 支持 TypeScript 吗？

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

### @duetds/components 支持 ESM 还是 CommonJS？

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

### @duetds/components 可以商用吗？

@duetds/components 使用 SEE LICENSE IN LICENSE\.md 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @duetds/components 的下载量有多少？

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

### @duetds/components 还在维护吗？

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