企业官网建设流程全解析

Storybook 入门：让 UI 组件验证只需三分钟

【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook

改一个按钮的圆角，要先启动整个应用、登录、翻到对应页面，才能看到那个按钮。这个循环，组件越多越痛苦。Storybook 是业内标准的 UI 组件开发工具：它让每个组件在隔离环境里单独运行，直接在浏览器中查看、交互、验证，全程不碰业务逻辑。

五分钟搭好组件工作台

安装成本比大多数人想象的低。在项目根目录执行：

npm create storybook@latest npm run storybook

第一条命令会自动探测你的框架（React、Vue、Angular、Svelte 都支持），装好依赖，生成配置和几个示例故事。第二条命令启动本地服务器，浏览器自动打开。

你看到的不是空白页：左侧是故事树，中间是组件画布，底部是 Controls 参数面板，还有新手引导一步一步带你点完一圈。

给组件写第一个故事：把状态变成看得见的东西

核心概念是「故事」：记录组件在某一种特定状态下的样子。按钮的默认态、加载态、禁用态，各是一个故事。故事文件放在组件源码旁边，以.stories.ts结尾：

export const Primary = { args: { label: 'Button', primary: true }, }

args就是传给组件的 props。好处是这些值不需要写死在界面里：你可以在页面的 Controls 面板里直接改，组件实时刷新。改到满意点保存，它就存成一个新的故事，代码自动写回文件。

组件状态的验证方式从此从「猜」变成「看」：正常数据、空数据、超长文本，各建一个故事，一眼扫过去就能确认。

让组件状态可见、可调、可测

组件上了画布，能做的事就多了：

• Controls：把每个 props 变成开关、输入框或滑块，不碰代码就能调参数；
• Actions：点击组件后，它发出的事件会被记录在面板里，方便你确认回调有没有触发；
• Docs 页：Storybook 从代码自动生成参数表格和使用示例，组件文档生成不用你手写，代码变了文档跟着变。

每个故事还自带独立的测试入口：交互测试（点击后断言）、视觉对比、可访问性检查都能挂在故事上。你改了一处样式，侧边栏里所有相关故事看起来都还是对的，再合并代码，心里才有底。

组件库长大后，这个工作台属于整个团队

组件隔离开发不只是开发者的便利。设计师拿到链接就能看组件的每一种状态，QA 可以专门对着边界情况过一遍，新人通过故事树浏览，半天摸清组件库长什么样，不用先读业务代码。

Storybook 还支持把工作台发布到云端，团队成员点开链接就能用，不需要在本地跑代码。

下一步就一件事：挑一个最近让你头疼的组件，把它最常见的三种状态写成三个故事，跑起来看五分钟效果。如果你的项目只有两三个一次性页面、组件不打算复用，那不必急着引入，这个工具留给有组件库诉求的团队。

【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook