安装 Storybook
使用 Storybook CLI 在一个命令中安装它。在项目的根目录中运行此命令
npx storybook@latest init安装特定版本
init 命令将使用您指定的版本。例如
storybook@latest init将初始化最新版本[email protected] init将初始化7.6.10storybook@7 init将初始化最新的7.x.x版本
Storybook 将在安装过程中查看项目的依赖项，并提供最佳的可用配置。
上面的命令将在本地环境中进行以下更改
- 📦 安装所需的依赖项。
- 🛠 设置运行和构建 Storybook 所需的脚本。
- 🛠 添加默认的 Storybook 配置。
- 📝 添加一些样板故事，帮助您入门。
- 📡 设置遥测以帮助我们改进 Storybook。了解更多信息，请访问 此处。
观看视频教程
运行设置向导
如果一切顺利，您应该会看到一个设置向导，它将帮助您开始使用 Storybook，向您介绍主要的概念和功能，包括 UI 的组织方式、如何编写第一个故事以及如何使用 控件 测试组件对各种输入的响应。
如果您跳过了向导，您始终可以通过在 Storybook 实例的 URL 中添加 ?path=/onboarding 查询参数来再次运行它，前提是示例故事仍然可用。
启动 Storybook
Storybook 带有一个内置的开发服务器，包含项目开发所需的一切。根据您的系统配置，运行 storybook 命令将启动本地开发服务器，输出地址，并在新浏览器选项卡中自动打开地址，并显示欢迎屏幕。
npm run storybookStorybook 收集完全匿名的数据以帮助我们改进用户体验。参与是可选的，如果您不想分享任何信息，可以 选择退出。
这里有一些值得注意的项目
- 一系列有用的链接，提供更深入的配置和定制选项。
- 第二组链接，帮助您扩展 Storybook 知识并参与不断发展的 Storybook 社区。
- 一些示例故事，帮助您入门。
故障排除
使用其他包管理器运行 Storybook
Storybook CLI 包含对行业流行的包管理器（如 Yarn、npm 和 pnpm）的支持，在您初始化 Storybook 时会自动检测您使用的管理器。但是，如果您想使用特定包管理器作为默认管理器，请在安装命令中添加 --package-manager 标志。例如
npx storybook@latest init --package-manager=npmCLI 未检测到我的框架
如果您使用的是自定义环境设置或需要手动设置 Storybook，您可以使用 --type 标志指定您需要使用的框架。以下是支持的框架以及使用它们的示例。
| 框架 | 类型 |
|---|---|
| Angular | angular |
| Ember | ember |
| HTML | html |
| Next.js | nextjs |
| Preact | preact |
| Qwik | qwik |
| React | react |
| 服务器 | server |
| Solid | solid |
| Svelte | svelte |
| Vue 3 | vue3 |
| Web Components | web_components |
npx storybook@latest init --type solidStorybook 与 Yarn Plug'n'Play (PnP) 支持
如果您在使用最新版本的 Yarn 的项目中启用了 Storybook，并且启用了 Plug'n'Play (PnP)，您可能会注意到它将生成 node_modules，其中包含一些额外的文件和文件夹。这是一个已知限制，因为 Storybook 依赖于某些目录（例如 .cache）来存储缓存文件和其他数据，以提高性能并加快构建速度。您可以安全地忽略这些文件和文件夹，调整您的 .gitignore 文件以将它们从您使用的版本控制中排除。
使用 Webpack 4 运行 Storybook
如果您之前在使用 Webpack 4 的项目中安装了 Storybook，它将不再工作。这是因为 Storybook 现在默认使用 Webpack 5。要解决此问题，我们建议您将项目升级到 Webpack 5，然后运行以下命令以将您的项目迁移到最新版本的 Storybook。
npx storybook@latest automigrate安装过程似乎不稳定，并且一直失败
如果您在安装过程中仍然遇到一些问题，我们建议您查看以下资源
- Storybook 的 React Webpack 自述文件，以获取有关如何在您的 React 项目中使用 Webpack 5 设置 Storybook 的更多信息。
- Storybook 的 React Vite 自述文件，以获取有关如何在您的 React 项目中使用 Vite 设置 Storybook 的更多信息。
- Storybook 的帮助文档，以联系社区并寻求帮助。
现在您已经成功安装了 Storybook 并了解了它的工作原理，让我们从 设置向导 中您停止的地方继续，更深入地了解编写故事。