# @hareui/vue 中文文档

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

版本：0\.5\.0
npm 元数据更新时间：2026-11-01T04:25:56.917Z
中文译文更新时间：2026-11-01T07:27:29.379Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：3.1 MB，1714 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：9 个
- peer 依赖：vue ^3\.5\.0，vite \>=6\.0\.0，shiki ^4\.5\.0，fuse\.js ^7\.5\.0，d3-scale ^4\.0\.0，d3-shape ^3\.0\.0，@tiptap/pm ^3\.32\.0，tailwindcss ^4\.3\.0，@tiptap/core ^3\.32\.0，@tiptap/vue-3 ^3\.32\.0，embla-carousel ^8\.6\.0，@tiptap/markdown ^3\.32\.0，embla-carousel-vue ^8\.6\.0，@tiptap/starter-kit ^3\.32\.0，embla-carousel-fade ^8\.6\.0，@tiptap/extension-code ^3\.32\.0，@internationalized/date ^3\.12\.4，@tiptap/extension-image ^3\.32\.0，embla-carousel-autoplay ^8\.6\.0，embla-carousel-auto-height ^8\.6\.0，embla-carousel-auto-scroll ^8\.6\.0，embla-carousel-class-names ^8\.6\.0，@tiptap/extension-bubble-menu ^3\.32\.0，@tiptap/extension-placeholder ^3\.32\.0，embla-carousel-wheel-gestures ^8\.1\.0，@tiptap/extension-floating-menu ^3\.32\.0，@tiptap/extension-horizontal-rule ^3\.32\.0
- 首次发布：2026-10-03T02:37:53.398Z
- 最新版本发布：2026-11-01T04:25:56.740Z
- 已发布版本数：8（近 12 个月 8 个）

## 中文简介

haroui - HeroUI v3的Vue 3端口

## 安装

```sh
npm install @hareui/vue
```

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

## README

 [![Documentation](https://img.shields.io/badge/docs-hareui.alexzvn.me-black?style=flat)](https://hareui.alexzvn.me/)[![License](https://img.shields.io/badge/license-MIT-blue?style=flat) ](https://github.com/alexzvn/hareui/blob/main/LICENSE)[![npm version](https://img.shields.io/npm/v/@hareui/vue.svg?style=flat-round)](https://www.npmjs.com/package/@hareui/vue)

# HareUI

**文档: [hareui.alexzvn.me](https://hareui.alexzvn.me/)**

是一个Vue 3端口 [HeroUI v3](https://heroui.com/)． 的可访问原语配对 [河UI](https://reka-ui.com/) 的实用优先样式 [顺风CSS v4](https://tailwindcss.com/)，并保留了HeroUI的设计、令牌和组件API。

-   **默认可访问**键盘，焦点和屏幕阅读器行为来自Reka UI
-   **顺风CSS v4**：没有CSS-in- js运行时，主题通过CSS变量
-   **和英雄一模一样**：样式和标记是从HeroUI v3中翻译过来的
-   **Slot-based组成**：我们的插槽和 `as` 而不是深度嵌套的道具
-   **零样板**组件无需插件或提供商即可工作

## 开始使用

要求: [Vue 3.5 +](https://vuejs.org/) 和 [顺风CSS v4](https://tailwindcss.com/docs/installation/framework-guides).

```bash
npm i @hareui/vue
```

将这些样式添加到你的主CSS文件中，在Tailwind之后：

```css
@import 'tailwindcss';
@import '@hareui/vue';
```

使用组件:

```vue
<script setup lang="ts">
import { Button } from '@hareui/vue'
</script>

<template>
  <Button>My Button</Button>
</template>
```

### Vite插件（可选）

`@hareui/vue/vite` 自动导入模板中的组件(通过 [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components))，并在构建时应用应用范围的主题覆盖：

```ts
// vite.config.ts
import hareui from '@hareui/vue/vite'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
    hareui({
      prefix: 'H', // <HButton> / <h-button>; default '' keeps <Button>
      ui: { button: { slots: { base: 'uppercase' }, defaultVariants: { size: 'lg' } } },
    }),
  ],
})
```

-   `prefix`： harei组件的模板前缀。Kebab-case (`'h-'`)被接受。
-   `ui`形状与…相同 `createHareUI({ ui })`;必须是json可序列化的。 `createHareUI({ ui })`、变型道具； `:ui` 和 `class` 仍然覆盖它。
-   `components`：转发到unplugin-vue-components (`dts`， `dirs`,额外的 `resolvers`，…)，或者 `false` 关闭自动导入。

已经自己注册了unplugin-vue组件吗？添加 `HareUIResolver({ prefix })` 从 `@hareui/vue/vite` 对其 `resolvers` 代替。

## 文档

访问 [hareui.alexzvn.me](https://hareui.alexzvn.me/) 对于主题，暗模式，样式，构图和每个组件。人工智能工具可以读取文档 [llms.txt](https://hareui.alexzvn.me/llms.txt) 或者 [llms-full.txt](https://hareui.alexzvn.me/llms-full.txt).

## 贡献

问题和拉请求是欢迎的 [github.com/alexzvn/hareui](https://github.com/alexzvn/hareui).

## 许可证

[麻省理工学院](https://github.com/alexzvn/hareui/blob/main/LICENSE)． 样式、符号和图标派生自HeroUI；看到 [THIRD\_PARTY\_LICENSES.md](https://npmcn.com/package/%40hareui/vue/THIRD_PARTY_LICENSES.md).

## 常见问题

### @hareui/vue 是什么？

haroui - HeroUI v3的Vue 3端口

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

在项目目录运行 npm install @hareui/vue，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.5\.0）、tailwindcss（^4\.3\.0）、@internationalized/date（^3\.12\.4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

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

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

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

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

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

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

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

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