# @choosemycompany/ui 中文文档

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

版本：1\.4\.0
npm 元数据更新时间：2026-11-04T15:01:20.702Z
中文译文更新时间：2026-11-09T17:34:57.894Z
软件包许可：未声明

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

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

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

- 包体积（解压后）：2 MB，6 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：10 个
- peer 依赖：@tiptap/vue-3 ^2\.27\.2，@tiptap/starter-kit ^2\.27\.2，@tiptap/extension-link ^2\.27\.2，@tiptap/extension-color ^2\.27\.2，@tiptap/extension-image ^2\.27\.2，@tiptap/extension-highlight ^2\.27\.2，@tiptap/extension-underline ^2\.27\.2，@tiptap/extension-text-align ^2\.27\.2，@tiptap/extension-text-style ^2\.27\.2，@tiptap/extension-placeholder ^2\.27\.2
- 首次发布：2025-07-07T15:13:01.869Z
- 最新版本发布：2026-11-04T15:01:20.454Z
- 近 30 天下载量：2093（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：155（近 12 个月 116 个）

## 中文简介

选择 MyCompany UI 是执行的 UI 组件库 [](https://design.choosemycompany.com/)我们的设计系统 选择MyCompany UI 写入 [Vue.js (英语)](https://vuejs.org/) 其目标是:

## 安装

```sh
npm install @choosemycompany/ui
```

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

## README

# 选择 MyCompany 用户界面

选择 MyCompany UI 是执行的 UI 组件库 [](https://design.choosemycompany.com/)我们 设计系统。 选择MyCompany UI 写入 [Vue.js (英语)](https://vuejs.org/) 其目标是:

-   创建可重复使用的UI组件来加速前端开发.
-   为选择 MyCompany 中的所有组件创建用户界面一致性 .

## 使用量

1.  要在您的工程中选择 MyCompany UI, 请添加为依赖 :
    
    ```sh
    pnpm add @choosemycompany/ui
    ```
    
2.  在应用程序中包含所需的样式表 .
    
    ```css
    @import "@choosemycompany/ui/dist/assets/index.css";
    ```
    
3.  按要求导入组件 :
    
    ```javascript
    import { CmcButton } from "@choosemycompany/ui";
    ```
    
    > **说明:** 选择MyCompany UI 兼容树摇, 您可以在您的工程中启用此功能 减少捆绑大小.
    

## 快速启动 - 开发

确保你有 [节点](https://nodejs.org/en/) 23.x(LTS)和 [小时](https://pnpm.io/) 10.12或较新.

```sh
# Clone the project
git clone git@github.com:choosemycompany/cmc-ui.git

# Navigate to the root of the project
cd cmc-ui

# Install the project
make install
```

转到 [http://localhost:6006 (英语)](http://localhost:6006/)

### 链接设计系统测试您的应用程序中的更改

#### 在 cmc 前端/ 创建 docker- compose. override. yml

商业服务实例:

```yaml
services:
  commercial:
    volumes:
      - ./commercial/docker-entrypoint.sh:/usr/local/bin/docker-entrypoint
      - ./commercial:/srv/app/commercial:cached
      - ./commercial/node_modules:/srv/app/commercial/node_modules:delegated
      - /tmp/.X11-unix:/tmp/.X11-unix
      - ../cmc-ui:/srv/app/cmc-ui
```

#### 在/srv/app/商业中创建 pnpmfile.local.cjs

```javascript
module.exports = {
  hooks: {
    readPackage(pkg) {
      if (pkg.dependencies?.['@choosemycompany/ui']) {
        pkg.dependencies['@choosemycompany/ui'] = 'link:../cmc-ui';
      }
      return pkg;
    },
  },
};
```

#### 通过.npmrc(不执行)在本地启用

```ini
pnpmfile=pnpmfile.local.cjs
```

现在,每次你想看到设计系统在应用程序中的变化,就运行 `pnpm build:lib` 在 cmc-ui 中,它应该用更新的组件重新装入您的应用程序.

### 设计符号

选择MyCompany UI 使用设计符号来维持一个单一的真理源,通过自动化, 可用于不同的用途。 更多信息: 设计标志 [设计托肯斯社区小组](https://www.designtokens.org/)。 。 。 .

## 释放

| 触发 | 中情局 |
| --- | --- |
| 任何分支或拉动请求 | 林特和测试 |
| 合并为 `main` | 林特,测试,故事书 部署在预录 |
| `vX.Y.Z` 标签 | Lint, 测试, 版本检查, npm 发布, 故事书部署到 prod |

标签必须匹配 `version` 内 `package.json`,而该版本必须完全是一个补丁,小于或比npm上公布的最新版本重要一步.

1.  打开 `develop`,颠倒 `version` 内 `package.json` 在拉请求.
    
2.  打开调取请求 `develop` 改为 `main` 并把它与一个合并的承诺,而不是一个壁球,所以 `main` 财务报告和审定财务报表 `develop` 保持同样的历史.
    
3.  请检查access-date=中的日期值 (帮助) 前作中"文史资料".
    
4.  标记 `main` 并按下标签:
    
    ```sh
    git fetch origin
    git tag v1.2.3 origin/main
    git push origin v1.2.3
    ```
    

## 规则

-   图书馆用户将使用的常数应在 `<ComponentName>.constants.ts` 和组件中使用的常数必须放在 `<ComponentName>.vue.ts`。 。 。 .

## 常见问题

### @choosemycompany/ui 是什么？

选择 MyCompany UI 是执行的 UI 组件库 我们的设计系统 选择MyCompany UI 写入 Vue\.js \(英语\) 其目标是:

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

在项目目录运行 npm install @choosemycompany/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@tiptap/vue-3（^2\.27\.2）、@tiptap/starter-kit（^2\.27\.2）、@tiptap/extension-link（^2\.27\.2）、@tiptap/extension-color（^2\.27\.2）、@tiptap/extension-image（^2\.27\.2）、@tiptap/extension-highlight（^2\.27\.2）、@tiptap/extension-underline（^2\.27\.2）、@tiptap/extension-text-align（^2\.27\.2）、@tiptap/extension-text-style（^2\.27\.2）、@tiptap/extension-placeholder（^2\.27\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

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

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

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

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

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

@choosemycompany/ui 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

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

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

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

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