Storybook 组件文档

Storybook 是组件开发文档工具，支持独立开发和测试组件。

Storybook 特点

特点	说明
组件隔离	独立开发环境
交互演示	可视化测试
文档生成	自动生成文档
多框架支持	Vue/React/Svelte

安装 Storybook

Bash

# Vue 项目
npx storybook init --builder vite

# React 项目
npx sb init --builder vite

目录结构

JavaScript

src/
├── components/
│   └ Button.vue
│   └ Button.stories.js  # Story 文件
└── .storybook/
    ├── main.js           # 配置
    └ preview.js

编写 Stories

JavaScript

// Button.stories.js
import Button from './Button.vue'

export default {
  title: 'Components/Button',
  component: Button
}

export const Primary = {
  args: {
    type: 'primary',
    text: 'Primary Button'
  }
}

export const Secondary = {
  args: {
    type: 'secondary',
    text: 'Secondary Button'
  }
}

注意：Stories 定义组件的不同状态和参数。

Storybook 配置

Bash

// .storybook/main.js
export default {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions'
  ],
  framework: {
    name: '@storybook/vue3-vite',
    options: {}
  }
}

运行 Storybook

Bash

npm run storybook

访问 http://localhost:6006 查看组件文档。

构建静态文档

JavaScript

npm run build-storybook

输出到 storybook-static 目录，可部署到静态托管。

Vite 配置集成

text

// .storybook/main.js
export default {
  viteFinal: async (config) => {
    // 扩展 Vite 配置
    config.resolve.alias = {
      '@': path.resolve(__dirname, '../src')
    }
    return config
  }
}

Storybook 用途

用途	说明
组件开发	独立环境开发组件
UI 测试	视觉回归测试
文档展示	组件库文档
设计协作	设计师查看组件

Addons 扩展

Addon	功能
essentials	基础功能集
interactions	交互测试
docs	文档生成
a11y	无障碍检查

要点总结

Storybook 独立开发测试组件
Stories 定义组件状态
--builder vite 使用 Vite 构建
构建静态文档部署

📝 发现内容有误？点击此处直接编辑