使用 Vite 的 Web Components Storybook

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

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

安装

¥Install

要在现有的项目中安装 Storybook，请在项目根目录下运行以下命令：

¥To install Storybook in an existing project, run this command in your project's root directory:

npm create storybook@latest

接下来，你可以开始使用写故事、运行测试和组件文档。要更好地控制安装过程，请参阅安装指南。

¥You can then get started writing stories, running tests and documenting your components. For more control over the installation process, refer to the installation guide.

要求

¥Requirements

Vite ≥ 5

运行 Storybook

¥Run Storybook

要为特定项目运行 Storybook，请运行以下命令：

¥To run Storybook for a particular project, run the following:

npm run storybook

要构建 Storybook，请运行：

¥To build Storybook, run:

npm run build-storybook

你将在配置的 outputDir（默认为 storybook-static）中找到输出。

¥You will find the output in the configured outputDir (default is storybook-static).

常见问题

¥FAQ

如何手动安装 Web Components 框架？

¥How do I manually install the Web Components framework?

首先，安装框架：

¥First, install the framework:

npm install --save-dev @storybook/web-components-vite

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

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

.storybook/main.ts

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

API

选项

¥Options

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

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

.storybook/main.ts

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

可用选项包括：

¥The available options are:

`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.