安装

安装

在终端中执行以下命令之一

初始化和启动应用

使用 init 命令初始化项目。

系统将提示您配置项目

安装依赖项以启动本地服务器

启动本地服务器

添加组件

一旦您的 HeroUI 项目准备好进行开发，您可以使用 CLI 添加单个组件。例如，要添加按钮组件

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

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

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

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

安装包

要安装 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 设置

至关重要的是在应用程序的 root 处添加 HeroUIProvider。

安装核心包

虽然您可以单独安装每个包，但您需要先安装核心包，以确保所有组件都能正常工作。

在终端中运行以下命令之一来安装核心包

安装组件

现在，让我们安装您想要使用的组件。例如，如果您想使用 Button 组件，您需要在终端中运行以下命令之一

提升依赖项设置

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

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

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

Tailwind CSS 设置

当您使用单独的包时，TailwindCSS 设置会略有变化。您只需要将您正在使用的组件的样式添加到您的 tailwind.config.js 文件中。例如，对于 Button 组件，您需要将以下代码添加到您的 tailwind.config.js 文件中

Provider 设置

至关重要的是在应用程序的 root 处添加 HeroUIProvider。

使用组件

现在，您可以在您的应用程序中使用您安装的组件了