用storybook来管理你的UI组件库
最新回答
冰依湄凌
2026-10-21 14:54:32
可以帮助构建 UI 组件，组合组件，说明文档，测试和部署 UI 组件的工具，与业务功能隔离开来，专注于开发组件。
支持框架 React，Vue等
提供丰富的插件供开发使用，比如docs可以生产组件参数说明（参数描述，参数定义，支持的类型等）， knobs 帮助您在隔离构建UI组件时 可以动态地修改组件的参数来验证交互; notes可以展示你的md文档；addon-storysource可以直接在页面看到你的源码；一键生成所有截图的Storybook Chrome Screenshot Addon。这些社区的addons都非常实用。感兴趣可以自己增加
支持模拟不同设备下的组件
jest自动化测试组件还有依靠视觉,快照和视觉回归测试
灵活度很高，如果想使用js/ts，css,/scss/styled-components, redux 都是可以的，在其他组件库基础上进行二次开发，需要自行配置项目
安装
npx sb init 然后选择react, 回车下一步
yarn storybook
开始
写一个 stories/*.stories.js
import React from 'react';
// 生产storybook文档目录，Design System大类下一个Table组件
export default {
title: 'Design System/Table',
component:
};
// 组件
export const Basic = () => {
return
}
=> 生成的storybook 如下图
如何配合lerna发包：
大家可以看下eric和david同学的分享 使用Lerna管理发布Javascript包 和 如何开发和发布npm包
如何安装storybook（
https://storybook.js.org/addons/
）插件库：在文件夹.storybook内添加配置即可// .main.js
module.exports = {
"stories": [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials"
]
}
其他同类型产品：
docz:
https://github.com/doczjs/docz/ https://www.docz.site/
Styleguidist
https://react-styleguidist.js.org/
通过Markdown文档化组件资源
教程：
https://www.learnstorybook.com/intro-to-storybook/react/zh-CN/get-started/
官网：
https://storybook.js.org/
medium：
https://medium.com/storybookjs
其他
别人家怎么用storybook的：
http://storybook.anyvision.co/?path=/story/style-colors--base
https://reaviz.io/?path=/story/docs-advanced-custom-charts
–pagehttps://reaviz.io/?path=/docs/charts-sankey-plot--autosize
热门标签
