如何使用 Storybook

5 min read

使用 Storybook 的步骤如下：

  1. 安装 Storybook：打开终端，并在项目文件夹中运行以下命令：
npx sb init

这将在项目文件夹中初始化 Storybook，并添加所需的配置文件和示例组件。

  1. 创建组件：在项目文件夹的 src 目录中创建一个新的 .stories.js 文件来定义和展示组件。你可以编写多个 .stories.js 文件来组织和展示不同的组件。

  2. 编写组件的 Story：在 .stories.js 文件中，使用 Storybook 提供的函数（例如 storiesOf 或 export default）来定义组件的 Story。Story 是组件的不同状态和用例，可以在 Storybook 中展示和演示。

  3. 运行 Storybook：在终端中运行以下命令以启动 Storybook：

npm run storybook

这将启动 Storybook 服务器，并在浏览器中打开 Storybook 页面。

  1. 在 Storybook 中查看组件：在浏览器中打开 Storybook 页面后，可以在导航栏中查找和选择组件的 Story，以查看组件在不同状态下的展示和演示。

  2. 更新组件 Story：修改组件的 .stories.js 文件时，Storybook 将自动重新加载并更新对应的组件展示。

这些是使用 Storybook 的基本步骤。你可以在 Storybook 官方文档中进一步学习和探索有关 Storybook 的更多功能和用法。