适用于 React 和 Vite 的 Storybook

Storybook for React & Vite 是一个 framework，它可以轻松地为使用 Vite 构建的 React 应用单独开发和测试 UI 组件。它包括：

¥Storybook for React & Vite is a framework that makes it easy to develop and test UI components in isolation for React applications built with Vite. It includes:

• 🏎️ 为提高性能而预先打包

  ¥🏎️ Pre-bundled for performance

• 🪄 零配置

  ¥🪄 Zero config

• 💫 还有更多！

  ¥💫 and more!

要求

¥Requirements

• React ≥ 16.8

• Vite ≥ 4.0

• Storybook ≥ 8.0

入门

¥Getting started

在没有 Storybook 的项目中

¥In a project without Storybook

在 React 项目的根目录中运行此命令后，按照提示进行操作：

¥Follow the prompts after running this command in your React project's root directory:

npx storybook@latest init

有关开始使用 Storybook 的更多信息。

¥More on getting started with Storybook.

在带有 Storybook 的项目中

¥In a project with Storybook

此框架旨在与 Storybook 7+ 配合使用。如果你尚未使用 v7，请使用以下命令升级：

¥This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command:

npx storybook@latest upgrade

自动迁移

¥Automatic migration

运行上面的 upgrade 命令时，你应该会收到一个提示，要求你迁移到 @storybook/react-vite，它应该为你处理所有事情。如果自动迁移不适用于你的项目，请参考下面的手动迁移。

¥When running the upgrade command above, you should get a prompt asking you to migrate to @storybook/react-vite, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below.

手动迁移

¥Manual migration

首先，安装框架：

¥First, install the framework:

npm install --save-dev @storybook/react-vite

然后，更新你的 .storybook/main.js|ts 以更改框架属性：

¥Then, update your .storybook/main.js|ts to change the framework property:

import { StorybookConfig } from '@storybook/react-vite';
 
const config: StorybookConfig = {
  // ...
  // framework: '@storybook/react-webpack5', 👈 Remove this
  framework: '@storybook/react-vite', // 👈 Add this
};
 
export default config;

运行安装向导

¥Run the Setup Wizard

如果一切顺利，你应该会看到一个安装向导，它将帮助你开始使用 Storybook，向你介绍主要概念和功能，包括 UI 的组织方式、如何编写你的第一个故事以及如何利用 controls 测试组件对各种输入的响应。

¥If all goes well, you should see a setup wizard that will help you get started with Storybook introducing you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing controls.

如果你跳过了向导，你可以随时通过将 ?path=/onboarding 查询参数添加到 Storybook 实例的 URL 来再次运行它，前提是示例故事仍然可用。

¥If you skipped the wizard, you can always run it again by adding the ?path=/onboarding query parameter to the URL of your Storybook instance, provided that the example stories are still available.

API

选项

¥Options

如果需要，你可以传递一个选项对象以进行其他配置：

¥You can pass an options object for additional configuration if needed:

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite';
 
const config: StorybookConfig = {
  framework: {
    name: '@storybook/react-vite',
    options: {
      // ...
    },
  },
};
 
export default config;

builder

类型：Record<string, any>

¥Type: Record<string, any>

配置 框架的构建器 的选项。对于此框架，可以在 Vite 构建器文档 中找到可用选项。

¥Configure options for the framework's builder. For this framework, available options can be found in the Vite builder docs.