# @cooperco/cooper-component-library 中文文档

规范地址：https://npmcn.com/package/%40cooperco/cooper-component-library/

版本：0\.1\.154
npm 元数据更新时间：2026-11-05T18:15:10.130Z
中文译文更新时间：2026-11-11T01:15:57.068Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40cooperco/cooper-component-library
原文对照：https://npmcn.com/package/%40cooperco/cooper-component-library/?lang=original

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

- 包体积（解压后）：9.1 MB，698 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：15 个
- peer 依赖：vue ^3\.0\.0，graphql-tag ^2\.12\.6
- 首次发布：2024-08-06T21:26:10.657Z
- 最新版本发布：2026-11-05T18:15:09.931Z
- 近 30 天下载量：2309（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：157（近 12 个月 95 个）

## 中文简介

Vue 3 组件库由 TypeScript, Vite, 和 Tailwind CSS 所建. 发表于 `@cooperco/cooper-component-library` 并设计通过GraphQL与CMS内容集成.

## 安装

```sh
npm install @cooperco/cooper-component-library
```

也可以使用：`pnpm add @cooperco/cooper-component-library`、`yarn add @cooperco/cooper-component-library`、`bun add @cooperco/cooper-component-library`

## README

# Cooper 组件库

Vue 3 组件库由 TypeScript, Vite, 和 Tailwind CSS 所建. 发表于 `@cooperco/cooper-component-library` 并设计通过GraphQL与CMS内容集成.

## 技术堆栈

-   **Vue 3.5+ 单曲** - API的构成 `<script setup>`
-   **类型脚本 5.3+** - 启用严格模式
-   **尾风 CSS 3.4+** - 通用第一型号
-   **维特 5.2+** - 图书馆构建模式
-   **故事书 8.2+** - 组成部分文件
-   **图QL** - 内容丰富的内容管理系统整合
-   **小时** - 软件包管理器

## 建议的 IDE 设置

-   [VS 代码](https://code.visualstudio.com/) + 键 [Vue - 官员](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (原为伏尔)并禁用 Vetur

## 发展

```bash
# Install dependencies
pnpm install

# Start Storybook dev server
pnpm run dev

# Run linter
pnpm run lint

# Fix linting issues
pnpm run lint:fix

# Type check
pnpm run check-types
```

## 本地测试

在出版前在消费项目中测试组件库:

```bash
# 1. Build and pack the library
pnpm run local-test
```

这创造了一个 `.tgz` 根目录中的文件(例如, `cooperco-cooper-component-library-0.1.61.tgz`(中文(简体) )

```bash
# 2. In the consuming project, install the local package
pnpm add /path/to/cooperco-cooper-component-library-0.1.61.tgz
```

这使得您可以在发布到 npm 之前测试本地的更改 .

## 建筑和出版

当修改合并到 `main`数字 :

### 工作流程

1.  **合并到主机** - 合并您的特性分支 `main`
2.  **补丁版本** - 使用更新版本编号 `npm version patch` (或 `minor`编号 :`major`(中文(简体) )
3.  **发布** - 运行 `npm publish` 发布到 npm 登记册
4.  **推开** - 推动更改和标记到 GitHub

### 热补版

如果一项紧急的修复措施必须到达一个被固定在更古老的图书馆的环境 版本,和固定 触摸不到任何下 `cms/`,参见 [文件/热补丁-释放.md](https://npmcn.com/package/%40cooperco/cooper-component-library/docs/hotfix-release.md) 用于发布“ 旧标签 + this” 仅作为在中间迁移中不拖动的预放出.

### 构建进程

当你跑的时候 `pnpm run build`,以下按顺序排列:

1.  **`build:types`** - 汇编 Vue 组件类型脚本定义
2.  **`build:cms`** - 编写内容丰富的图表QL查询
3.  **`vite build`** - 构建组件库捆绑

所有建筑的文物都输出给 `dist/` 目录.

### 软件包导出

包输出多个切入点 :

-   **组件 :** `@cooperco/cooper-component-library` - 主要组成部分图书馆
-   **样式 :** `@cooperco/cooper-component-library/css/main.css` - 主要风格
-   **主题:** `@cooperco/cooper-component-library/css/theme.css` - 主题变量
-   **查询 :** `@cooperco/cooper-component-library/cms/contentful/graphql` - 图QL查询

## 项目结构

```
├── src/
│   ├── components/          # Vue components
│   │   ├── ComponentName/
│   │   │   ├── ComponentName.vue
│   │   │   └── ComponentName.ts
│   │   ├── components.ts    # Component exports
│   │   └── types.ts         # Type exports
│   ├── config/              # Configuration (color palettes, passthroughs)
│   └── utils/               # Utility functions
├── cms/
│   └── contentful/
│       └── queries/         # GraphQL queries (see cms/contentful/queries/README.md)
├── .storybook/              # Storybook configuration
│   └── components/          # Component stories
└── dist/                    # Build output (generated)
```

## 文档

-   **组成部分文件:** 运行 `pnpm run dev` 查看故事书
-   **图QL 查询 :** 见 [cms/contentful/querys/README.md (中文(简体) )](https://npmcn.com/package/%40cooperco/cooper-component-library/cms/contentful/queries/README.md)
-   **发热器 :** 见 [文件/热补丁-释放.md](https://npmcn.com/package/%40cooperco/cooper-component-library/docs/hotfix-release.md)

## TODO 问题

-   还有很多地方 `class` typeScript 无法识别。 例子有"开始"/"结束""容器模块". 因为我们没有定义 `class` 关于组件类型。 定义它们会明确超越Vue的默认属性继承行为. 得想办法绕过去

## 常见问题

### @cooperco/cooper-component-library 是什么？

Vue 3 组件库由 TypeScript, Vite, 和 Tailwind CSS 所建\. 发表于 @cooperco/cooper-component-library 并设计通过GraphQL与CMS内容集成\.

### 如何安装 @cooperco/cooper-component-library？

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

### @cooperco/cooper-component-library 支持 TypeScript 吗？

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

### @cooperco/cooper-component-library 支持 ESM 还是 CommonJS？

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

### @cooperco/cooper-component-library 可以商用吗？

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

### @cooperco/cooper-component-library 的下载量有多少？

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

### @cooperco/cooper-component-library 还在维护吗？

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