返回博客

隆重介绍:Vue 版 Storybook 🎉

“Storybook for <此处插入框架名称>” 系列的开篇之作

loading
Norbert de Langen
@NorbertdeLangen
最后更新

自 Storybook 诞生之初,它就被称为 “React Storybook”,但在 3.0.0 版本发布 期间,它被更名为 “Storybook”。

正如 我们的路线图 中所述,此更改是为了支持比 React 更多的 UI 库。今天,随着 Storybook 3.2 的发布,我们很高兴推出众多新的 “Storybook for <此处插入框架名称>” 中的第一个
它就是 “Vue 版 Storybook”!

选择从 Vue 开始是一个简单的决定。Vue 目前正处于 疯狂增长 之中,而且考虑到它的组件化程度,从技术角度来看,它似乎非常适合 Storybook。👍

事实证明,它确实非常适合!得益于 webpackreactvuestorybook 本身都非常灵活,实现 Vue 版 Storybook 非常简单,概念验证大约花了 2 天时间。

我们花费了相当长的时间进行测试,并使插件能够支持 Vue 版 Storybook,同时又不会对 React 用户造成破坏性更改。


Vue-Play 呢?

我们 联系了 Vue Play(一个受 storybook 启发的项目)的维护者。但该项目似乎已被放弃。维护 Vue-Play 比为整个 OSS 社区启动一个“竞争对手”更可取,但我们的主要目标之一是使所有 Storybook 与尽可能多的 storybook 插件兼容。这本身就是一个巨大的挑战,但这意味着我们真的无法在 vue-play 维护者所做的辛勤工作的基础上继续前进。

支持插件吗?

并非全部都支持,但不幸的是,以下这些支持:addon-actionsaddon-linksaddon-knobsaddon-notes。我们将随着时间的推移逐步推出对更多插件的支持。请告诉我们您希望我们优先考虑哪些插件。当然,如果您想提供帮助,我们也非常欢迎!

为了稍微解释一下为什么我们最初不能简单地支持所有 storybook 插件:许多插件都与 React 紧密耦合。它们使用 React 组件包装 story 组件。我们不想对非 react 项目这样做,因为这会将 react 引入到他们的代码库中。我们希望预览渲染由他们自己完成。这应该允许库的开发人员/调试器工具工作。🙇

我们将进行实验,以找到更好的方法来增强/调整 story,而无需使用 react 组件包装 story。
这将需要一些时间来实验、找到最佳方法、实施正确的解决方案并迁移现有的插件和文档。


Vue 版 Storybook 演示

3 人参与了 Vue 版 Storybook 的发布工作,
组成了一个分工合作的优秀团队 💪
Norbert de Langen,启动了流程并使构建工作正常进行。
Alexandre Bodin,使渲染工作正常进行,并致力于插件支持。
Kazuya Kawaguchi,为 Storybook CLI 添加了 Vue 支持,并协助了其他工作。

我们非常感谢 Vue 社区给予我们的帮助和鼓励!

Storybook 已经改变了 react 开发体验,目前已被 AirBnB、Slack、Squarespace、Lonely Planet、Coursera 等公司使用。我们希望这将为 Vue 带来同样的生产力和便利!

如果您对 Vue 版 Storybook 有任何疑问、疑虑或问题,请通过在 GitHub 上提交 issue 告知我们。



如果您想支持 storybook,请点击下方的红心按钮,帮助更多人发现它。如果您想及时了解 Storybook 的进展,请关注我们的频道。我们还有更多激动人心的公告即将发布!

如果您或您的公司使用 storybook 并希望在经济上提供帮助,现在可以通过 Open Collective 实现!您的经济支持将使我们能够支持我们的贡献者!

storybook 已入驻 Open Collective
我们的使命是为设计师、开发人员和利益相关者创建最佳的 UI 工具。

♥️️ storybook 团队

加入 Storybook 邮件列表

获取最新的新闻、更新和发布信息

6,730位开发者以及更多

我们正在招聘!

加入 Storybook 和 Chromatic 背后的团队。构建被成千上万开发人员用于生产环境的工具。远程优先。

查看职位

热门文章

Storybook 3.2 发布公告

Vue 支持、Story 分层结构、RN 设备端 UI 等等!
loading
Michael Shilman

Storybook 3.3 发布公告

Angular 支持、设备视口、测试改进等等!
loading
Michael Shilman

开源软件

Storybook 的开源
loading
Norbert de Langen
加入社区
6,730位开发者以及更多
为什么为什么选择 Storybook组件驱动的 UI
文档指南教程更新日志遥测
社区插件参与进来博客
案例展示探索项目组件词汇表
开源软件
Storybook - Storybook 中文

特别感谢 Netlify CircleCI