官网 https://storybook.js.org 简介翻译：Storybook 是一款用于UI组件独立开发的开源工具。它使UI构建工作变得有组织和高效。亮点支持原生 HTML 和React (Native)、Vue、Angular、Svelte、Mithril 等常见 JavaScript UI 框架。提供构建分离的 UI 组件沙盒，以便你能开发难以复现的程序状态和边界案例按“故事”来编写组件库的使用文档、自动化生成指导，分享你的前端工作成果使用插件来强化你的UI构建、文案工作团队协作——可视的自动化UI测试快速开箱这里使用 React UI 库为例子参见官网： https://storybook.js.org/docs/guides/guide-react/ 组织“故事” 创建 "src/stories/hello-world.stories.jsx(tsx)" export default { title: "Components/Test", // 组织路径，按 '/' 分隔 component: Toolbar, // 可选，被 JsDoc 自动生成文档的组件 subcomponents: [] , // 可选，同上，作用于子组件 } if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } TODO 参见： https://storybook.js.org/docs/formats/component-story-format/ 插件推荐 backgrounds 背景 https://github.com/storybookjs/storybook/blob/next/addons/backgrounds/README.md centered 居中显示 https://github.com/storybookjs/storybook/blob/next/addons/centered/README.md docs 自动接口文档生成 https://github.com/storybookjs/storybook/blob/next/addons/docs/README.md knobs 参数调节 https://github.com/storybookjs/storybook/blob/next/addons/knobs/README.md 参考资源上手指南 https://www.learnstorybook.com/intro-to-storybook/ 官方 GitHub https://github.com/storybookjs/storybook

Storybook 制作前端开发的“故事书”

简介翻译：Storybook 是一款用于UI组件独立开发的开源工具。它使UI构建工作变得有组织和高效。

支持原生 HTML 和React (Native)、Vue、Angular、Svelte、Mithril 等常见 JavaScript UI 框架。

这里使用 React UI 库为例子

创建 "src/stories/hello-world.stories.jsx(tsx)"

export default {
  title: "Components/Test", // 组织路径，按 '/' 分隔
  component: Toolbar, // 可选，被 JsDoc 自动生成文档的组件
  subcomponents: [] , // 可选，同上，作用于子组件
}

TODO

好东西，目前我们团队也在用

本来上个寒假就研究写好了，准备要发帖。结果大二开学一忙拖到现在翻文件才发现😭

LittleboyHarry 想起一句话，“发表是最好的记忆”