Storybook for Web components 和 Vite

Storybook for Web components 和 Vite 是一个框架，可以轻松地为使用 Web components 并基于 Vite 构建的应用独立开发和测试 UI 组件。

要求

Vite ≥ 5.0

入门

在没有 Storybook 的项目中

在您的 Web components 项目根目录中运行此命令后，按照提示操作

npm create storybook@latest

了解更多关于 Storybook 入门的信息。

在已有 Storybook 的项目中

此框架设计用于 Storybook 7+ 版本。如果您尚未升级到 v7，请使用此命令进行升级

npx storybook@next upgrade

自动迁移

运行上面的 upgrade 命令时，您应该会收到提示，要求您迁移到 @storybook/web-components-vite，这应该可以为您处理所有事情。如果自动迁移不适用于您的项目，请参考下面的手动迁移说明。

手动迁移

首先，安装框架

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

然后，更新您的 .storybook/main.js|ts 文件，修改 framework 属性

.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 对象

.storybook/main.ts

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

可用选项如下

`builder`

类型：Record<string, any>

配置框架的构建器选项。对于此框架，可用选项请参阅Vite 构建器文档。