使用精美的组件更快地交付
HeroUI Pro

Vite

要求

要在你的 Vite 项目中使用 HeroUI，你需要遵循以下步骤

如果你正在启动一个新项目，你可以使用 HeroUI CLI 创建一个预配置 HeroUI 的新项目

使用 HeroUI + Vite 模板

如果你正在启动一个新项目，你可以运行以下命令之一来创建一个预配置 HeroUI 的 Vite 项目

自动安装

你可以使用 CLI 添加单个组件。例如，要添加一个按钮组件

此命令会将 Button 组件添加到你的项目并管理所有相关的依赖项。

你也可以一次添加多个组件

或者你可以通过运行以下命令来添加主库 @heroui/react

如果你省略组件名称，CLI 将提示你选择要添加的组件。

你仍然需要手动将 provider 添加到你的应用程序（我们正在努力自动化此步骤）。

手动安装

添加依赖项

在你的 Vite React 项目中，运行以下命令之一来安装 HeroUI

提升依赖项设置

注意：此步骤仅适用于使用 pnpm 安装的用户。如果你使用其他包管理器安装 HeroUI，则可以跳过此步骤。

如果你正在使用 pnpm，你需要将以下行添加到你的 .npmrc 文件中，以将我们的包提升到根目录 node_modules。

修改 .npmrc 文件后，你需要再次运行 pnpm install，以确保正确安装依赖项。

Tailwind CSS 设置

HeroUI 构建于 Tailwind CSS 之上，因此你需要首先安装 Tailwind CSS。你可以按照官方安装指南 安装 Tailwind CSS。然后，你需要将以下代码添加到你的 tailwind.config.js 文件中

注意：如果你正在使用 pnpm 和 monorepo 架构，请确保你指向的是 ROOT node_modules

Provider 设置

安装 HeroUI 后，你需要在应用程序的 root 处设置 HeroUIProvider。

转到 src 目录，在 main.jsx 或 main.tsx 中，将 HeroUIProvider 包裹在 App 周围

Next.jsRemix