# @carbon/vue 中文文档

规范地址：https://npmcn.com/package/%40carbon/vue/

版本：3\.0\.32
npm 元数据更新时间：2026-08-25T17:18:49.765Z
中文译文更新时间：2026-11-09T04:31:52.028Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：10.2 MB，300 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：7 个
- 首次发布：2019-01-11T17:36:40.202Z
- 最新版本发布：2026-08-25T17:18:49.422Z
- 近 30 天下载量：18432（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：215（近 12 个月 4 个）

## 中文简介

使用Vue.js建造的碳设计系统的组件集合

## 安装

```sh
npm install @carbon/vue
```

也可以使用：`pnpm add @carbon/vue`、`yarn add @carbon/vue`、`bun add @carbon/vue`

## README

# @ 碳/vue-3

 [![Carbon is released under the Apache-2.0 license](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](https://github.com/carbon-design-system/carbon/blob/master/LICENSE)[![CI workflow status](https://github.com/carbon-design-system/carbon/actions/workflows/ci.yml/badge.svg) ](https://github.com/carbon-design-system/carbon/actions/workflows/ci.yml)[![Maintained with Lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg) ](https://lerna.js.org/)[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg) ](https://github.com/carbon-design-system/carbon/blob/master/.github/CONTRIBUTING.md)[![Chat with us on Discord](https://img.shields.io/discord/689212587170201628?color=5865F2)](https://discord.gg/J7JEUEkTRX)

> 大力实施碳设计系统 收集资料 [碳组件](https://github.com/carbon-design-system/carbon-components) 使用 ![Vue logo](https://vuejs.org/images/logo.png) [Vue.js (英语)](https://vuejs.org/)。 。 。 .

## 碳矿 Vue图书馆 - 一个碳社区项目

这个 [图书馆](http://vue.carbondesignsystem.com/) 为前端开发者和工程师提供可再使用的Vue组件集,以构建网站和用户界面. 采用库可以使开发者在原型和制作工作中使用一致的标记,样式和行为.

## 所需社区捐款

作为一个社区项目捐款不仅受到欢迎,而且对该项目的维持和发展至关重要.

## 安装

```shell
npm add @carbon/vue
```

或者说

```shell
$ yarn add @carbon/vue
```

### 添加到 Vue 项目

`src/main.js`

```js
import CarbonVue3 from '@carbon/vue';
import App from './App.vue';
const app = createApp(App);
app.use(CarbonVue3);
app.mount('#app');
```

见 [哈罗,碳Vue](https://github.com/IBM/hello-carbon-vue3) 例如,Vue项目与Carbon.

### 添加到 Nuxt 工程

`plugins/carbon-vue.js`

```js
import CarbonVue from '@carbon/vue';

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(CarbonVue);
});
```

见 [你好 碳纳克特](https://npmcn.com/package/%40carbon/vue/#readme-add-to-nuxt-project) **马上就来了**

### 第3组

-   Vue 2支持将于2023年12月31日结束. 学习 [更多](https://vuejs.org/guide/introduction.html)。 。 。 .
-   从Vue 2升级? 看看这个 [移徙指南](https://v3-migration.vuejs.org/)。 。 。 .
-   Vue 2 组件可见于 `vue2` [分支](https://github.com/carbon-design-system/carbon-components-vue/tree/vue2)

碳10的Vue 3组件已与Vue 2组件达到平价. 特别是在无障碍方面需要做更多的工作。 如果要改进Vue 3组件,则遵循本准则.

1.  叉开这个回放 检查一下 `main` 分支
2.  查看目前正在改进哪些组件。 你可以通过寻找 [问题清单](https://github.com/carbon-design-system/carbon-components-vue/issues)。 。 。 .
3.  如果要改进一个组件,请查看开放式议题列表,看看是否有其他人已经着手了. 寻找带有"V3-Vue3"标签和组件名称的问题. 例如, "**CvDatePicker - 改善无障碍环境**" ..
4.  如果没有其他人已经着手研究,使用"QQ Vue 3-改进组件"创建出一个问题,并标注为上.
    -   完成组件, 准备好就创建 PR .
    -   构成部分预计将作为 [单文件组件](https://vuejs.org/guide/scaling-up/sfc.html) 使用 Vue 键 [组成 api](https://vuejs.org/guide/extras/composition-api-faq.html)。见 `CvCheckbox` 作为例子。 Vue 2 组件使用选项 API.
    -   您应该在 React 组件故事本中引用 DOM , 并确保包含任何访问 可能存在的改进.
    -   您应该更新故事, 并测试相关组件的大小写 。 有时故事可能需要更新 几乎总是需要更新组件的测试案例.
    -   如果你有问题标签@davidnixon 在你的议题, 告诉我如何帮助.

### 更改日志

[变动情况](https://npmcn.com/package/%40carbon/vue/CHANGELOG.md)

### 可用组件清单

查看可用的 Vue 组件 [这里](http://vue.carbondesignsystem.com/)使用信息见每个故事的说明.

## 建筑和出版

以下步骤将构建和发布软件包:

-   复制或下载回转;
-   运行 `yarn` 安装附属物和靴子套件;
-   运行 `yarn build` 建立包括故事书在内的所有软件包;

如果您只想构建单个软件包, 您可以限制范围 : `yarn build --scope @carbon/vue` `yarn build --scope storybook`

用本地服务器启动故事本 `yarn start`。 。 。 .

## 测试发布

要测试发布到 npm 注册 :

```shell
cd local-dev
docker-compose up
# open a new terminal
yarn build
npm add-user --registry http://0.0.0.0:4873/
# any username, password, & email will work
# try: carbon, vue, & carbon-vue@example.com
yarn test:publish
# maybe change some things and try again
yarn build
yarn test:unpublish
yarn test:publish
```

## 如何运行故事本

只要遵循下面列举的步骤,你就可以运行故事书.

1.  结账后 `vNext` 分支,为了安装依赖,运行命令 `yarn install` 根上;
2.  现在,运行命令 `cd storybook` ,然后再次运行命令 `yarn install` 安装故事本文件夹中的依赖性;
3.  最后,运行命令 `yarn serve` 在故事本文件夹中.

换句话说,这些是你们要执行的命令:

```
yarn install
cd storybook
yarn serve
```

或者说

```
yarn install
yarn serve:storybook
```

## ![IBM Telemetry](https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg) IBM 遥测

本套件使用IBM遥测来收集去识别和匿名的计量数据. 通过安装 此软件包是您同意的遥测收藏的依赖。 选择退出,看 [选择退出IBM遥测数据收集](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection)。 。 。 . 有关所收集数据的更多信息,请参见: [IBM 遥测文档](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics)。 。 。 .

## 常见问题

### @carbon/vue 是什么？

使用Vue\.js建造的碳设计系统的组件集合

### 如何安装 @carbon/vue？

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

### @carbon/vue 支持 TypeScript 吗？

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

### @carbon/vue 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @carbon/vue 可以商用吗？

@carbon/vue 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @carbon/vue 的下载量有多少？

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

### @carbon/vue 还在维护吗？

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