@hareui/vue

中文文档
0.5.0发布于 2026/11/01MITTypeScriptES Module

haroui - HeroUI v3的Vue 3端口

中文使用文档
文档目录5 节
  1. 开始使用
  2. Vite插件(可选)
  3. 文档
  4. 贡献
  5. 许可证

Documentation License npm version

HareUI

文档: hareui.alexzvn.me

是一个Vue 3端口 HeroUI v3. 的可访问原语配对 河UI 的实用优先样式 顺风CSS v4,并保留了HeroUI的设计、令牌和组件API。

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

开始使用

要求: Vue 3.5 + 和 顺风CSS v4.

npm i @hareui/vue

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

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

使用组件:

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

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

Vite插件(可选)

@hareui/vue/vite 自动导入模板中的组件(通过 unplugin-vue-components),并在构建时应用应用范围的主题覆盖:

// 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 对于主题,暗模式,样式,构图和每个组件。人工智能工具可以读取文档 llms.txt 或者 llms-full.txt.

贡献

问题和拉请求是欢迎的 github.com/alexzvn/hareui.

许可证

麻省理工学院. 样式、符号和图标派生自HeroUI;看到 THIRD_PARTY_LICENSES.md.

版本与发布记录

@hareui/vue 共发布 8 个版本,首次发布于 2026/10/03;过去 12 个月发布了 8 个版本。

版本发布日期距今
0.5.0latest2026/11/012 天前
0.4.02026/10/304 天前
0.3.02026/10/2410 天前
0.2.02026/10/2113 天前
0.1.32026/10/0430 天前
0.1.22026/10/031 个月前

关于 @hareui/vue 的常见问题

@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 和提交记录判断。