# @chakra-ui/vue 中文文档

规范地址：https://npmcn.com/package/%40chakra-ui/vue/

版本：0\.13\.1
npm 元数据更新时间：2025-08-25T12:25:23.600Z
中文译文更新时间：2026-11-09T23:59:14.076Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：2.7 MB，571 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：12 个
- peer 依赖：vue \>=2\.6\.10，@emotion/css ^11\.0\.0
- 首次发布：2020-03-14T18:29:10.665Z
- 最新版本发布：2023-03-25T04:51:28.714Z
- 近 30 天下载量：1694（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：65（近 12 个月 0 个）

## 中文简介

以QQ的速度建立可访问和可响应的Vue.js网站和应用程序

## 安装

```sh
npm install @chakra-ui/vue
```

也可以使用：`pnpm add @chakra-ui/vue`、`yarn add @chakra-ui/vue`、`bun add @chakra-ui/vue`

## README

![Build & Test Components](https://github.com/chakra-ui/chakra-ui-vue/workflows/Build%20&%20Test%20Components/badge.svg) ![Netlify Status](https://api.netlify.com/api/v1/badges/0140cfa8-f093-4a69-b29b-6b1abce0c04a/deploy-status) ![All contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)

[![chakra-ui symbol](https://res.cloudinary.com/xtellar/image/upload/v1584242872/chakra-ui/chakra-ui-vue.png)](https://github.com/chakra-ui/chakra-ui-vue)

## 轻松地构建可扩展和可访问的Vue.js应用程序.

**@ chakra-ui/ veue** 给您一组可访问且可调和的 Vue 组件,您可以用来构建您最喜欢的应用程序和站点 .

**_为Vue 2.X制取_**

## 找文件吗?

头在这里 [https://vue.chakra-ui.com (中文(简体) )](https://vue.chakra-ui.com/)

[**基图布212**](https://github.com/chakra-ui/chakra-ui-vue/issues/160)

## 特征

-   **简便型:** Chakra UI 包含一组布局组件,如 `CBox`, (中文(简体) ), `CFlex` 财务报告和审定财务报表 `CStack` 很容易通过道具来塑造你的部件. [学多点](https://chakra-ui.com/style-props)
-   **弹性可堆肥( C)**: Chakra UI组件以Vue UI Primitive为上架,用于无尽的可容性.
-   **可访问**Chakra UI组件遵循WAI-ARIA准则 规格和权利 `aria-*` 属性.
-   **黑暗模式QQ**: Chakra UI中的大多数组件都是暗模式相容的.

### 目录

1.  [安装](https://npmcn.com/package/%40chakra-ui/vue/#readme-installation)
2.  [使用量](https://npmcn.com/package/%40chakra-ui/vue/#readme-usage) (单位:千美元). [带有 Nuxt](https://npmcn.com/package/%40chakra-ui/vue/#readme-nuxt-usage)

-   [找文件吗?](https://npmcn.com/package/%40chakra-ui/vue/#readme-looking-for-the-documentation)
-   [特征](https://npmcn.com/package/%40chakra-ui/vue/#readme-features)
    -   [目录](https://npmcn.com/package/%40chakra-ui/vue/#readme-table-of-contents)
-   [安装](https://npmcn.com/package/%40chakra-ui/vue/#readme-installation)
-   [使用量](https://npmcn.com/package/%40chakra-ui/vue/#readme-usage)
    -   [密码箱启动器](https://npmcn.com/package/%40chakra-ui/vue/#readme-codesandbox-starters)
    -   [故事书组件](https://npmcn.com/package/%40chakra-ui/vue/#readme-storybook-components)
    -   [促进发展促进:](https://npmcn.com/package/%40chakra-ui/vue/#readme-development-for-contributing)
        -   [相关](https://npmcn.com/package/%40chakra-ui/vue/#readme-related)

## 安装

```bash
yarn add @chakra-ui/vue emotion
```

或者说

```bash
npm install @chakra-ui/vue emotion
```

> **说明:** 如果你使用 Nuxt, 你需要安装 `@nuxtjs/emotion` 软件包以及服务器侧使您的样式.

```bash
yarn add @chakra-ui/vue emotion @nuxtjs/emotion
```

## 使用量

**1\. 导入您的 Chakra UI 插件 `main.js` 文档.**

```js
import Vue from 'vue'
import Chakra from '@chakra-ui/vue'
import App from './App.vue'

Vue.use(Chakra)

new Vue({
  el: '#app',
  render: (h) => h(App)
}).$mount()
```

**2\. 将您的申请包入查克拉 `CThemeProvider`。 。 。 .** 我们还建议你列入 `CReset` 实现所有浏览器样式规范化的组件.

_在你身边 `App.vue` 文档._

```html
<template>
  <CThemeProvider>
    <CReset />

    <!--
      Your application code goes here! 😁
    -->
  </CThemeProvider>
</template>

<script>
  import { CThemeProvider, CReset } from '@chakra-ui/vue'

  export default {
    name: 'App',
    components: {
      CThemeProvider,
      CReset
    }
  }
</script>
```

如果您想要切换您的应用程序介于暗光模式之间,您也可以将您的应用程序包入其中 `ColorModeProvider` 组件.

**万岁! 现在可以开始了**。您可以开始使用这样的组件:

```html
<template>
  <CThemeProvider>
    <CReset />

    <!--
      Your application code goes here! 😁
    -->
    <CButton variantColor="blue">
      Chakra consumed ⚡️
    </CButton>
  </CThemeProvider>
</template>

<script>
  import { CThemeProvider, CReset, CButton } from '@chakra-ui/vue'

  export default {
    name: 'App',
    components: {
      CThemeProvider,
      CReset,
      CButton
    }
  }
</script>
```

### 密码箱启动器

-   [Vue 启动器](https://codesandbox.io/s/chakra-ui-vue-starter-2sy0g)
-   [Nuxt 启动器](https://codesandbox.io/s/chakra-ui-nuxt-demo-f8tq4)
-   [网格启动器](https://codesandbox.io/s/chakra-ui-gridsome-demo-038c9)

### 故事书组件

您也可以在 **[故事书](https://chakra-ui-vue.netlify.com/)来啊!**

### 促进发展促进:

有兴趣捐款吗? 看我们的 [未决问题](https://github.com/chakra-ui/chakra-ui-vue/issues)记得看看我们 [捐款者](https://npmcn.com/package/%40chakra-ui/vue/.github/CONTRIBUTING.md) 向导.

```bash
yarn install
yarn bootstrap
yarn dev
```

#### 相关

-   [反应的 Chakra UI](https://github.com/chakra-ui/chakra-ui)
-   [检查](https://vuetifyjs.org/)
-   [Buefy (法语)](https://buefy.org/)
-   [威萨克斯](https://lusaxweb.github.io/vuesax)

创建于 [约瑟夫·巴克布瓦](https://twitter.com/codebender828)

## 常见问题

### @chakra-ui/vue 是什么？

以QQ的速度建立可访问和可响应的Vue\.js网站和应用程序

### 如何安装 @chakra-ui/vue？

在项目目录运行 npm install @chakra-ui/vue，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（\>=2\.6\.10）、@emotion/css（^11\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @chakra-ui/vue 支持 TypeScript 吗？

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

### @chakra-ui/vue 支持 ESM 还是 CommonJS？

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

### @chakra-ui/vue 可以商用吗？

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

### @chakra-ui/vue 的下载量有多少？

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

### @chakra-ui/vue 还在维护吗？

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