安装 Storybook

对于安装 Storybook 8.3 或更高版本，您可以使用带有特定版本的 create 命令

npm create storybook@8.3

要安装低于 8.3 版本的 Storybook，您必须使用 init 命令

npx storybook@8.2 init

对于任一命令，您可以指定 npm 标签（例如 latest 或 next）或（部分）版本号。例如

• storybook@latest init 将初始化最新版本

• storybook@7.6.10 init 将初始化 7.6.10

• storybook@7 init 将初始化最新的 7.x.x 版本

使用其他包管理器运行 Storybook

Storybook CLI 包括对行业流行的包管理器（例如，Yarn、npm 和 pnpm）的支持，当您初始化 Storybook 时，它会自动检测您正在使用的包管理器。但是，如果您想使用特定的包管理器作为默认管理器，请将 --package-manager 标志添加到安装命令。例如

npm create storybook@latest --package-manager=npm

CLI 未检测到我的框架

如果您正在使用自定义环境设置或需要手动设置 Storybook，您可以使用 --type 标志来指定您需要使用的框架。下面列出了支持的框架以及如何使用它们的示例

npm create storybook@latest --type solid

Yarn Plug'n'Play (PnP) 对 Storybook 的支持

如果您在启用了 Plug'n'Play (PnP) 的新版 Yarn 上运行的项目中启用了 Storybook，您可能会注意到它会生成带有某些附加文件和文件夹的 node_modules。这是一个已知限制，因为 Storybook 依赖于某些目录（例如，.cache）来存储缓存文件和其他数据，以提高性能和更快的构建速度。您可以安全地忽略这些文件和文件夹，并调整您的 .gitignore 文件以将它们从您正在使用的版本控制中排除。

使用 Webpack 4 运行 Storybook

如果您之前在使用了 Webpack 4 的项目中安装了 Storybook，它将不再工作。这是因为 Storybook 现在默认使用 Webpack 5。要解决此问题，我们建议您将您的项目升级到 Webpack 5，然后运行以下命令将您的项目迁移到最新版本的 Storybook

npx storybook@latest automigrate

Storybook 在空目录中无法工作

默认情况下，Storybook 配置为检测您是在空目录还是现有项目中初始化它。但是，如果您尝试初始化 Storybook，在仅包含 package.json 文件的目录中选择基于 Vite 的框架（例如，React），您可能会遇到 Yarn Modern 的问题。这是由于 Yarn 处理对等依赖项的方式以及 Storybook 设置为与基于 Vite 的框架配合使用的方式，因为它需要安装 Vite 包。要解决此问题，您必须手动安装 Vite 并初始化 Storybook。

安装过程似乎不稳定且不断失败

如果您在安装过程中仍然遇到一些问题，我们鼓励您查看以下资源

• Storybook 的 React Vite 框架文档，以获取有关如何在具有 Vite 的 React 项目中设置 Storybook 的更多信息。
• Storybook 的 React Webpack 框架文档，以获取有关如何在具有 Webpack 5 的 React 项目中设置 Storybook 的更多信息。
• Storybook 的帮助文档，以联系社区并寻求帮助。