宣布 Storybook 3.2

Storybook 是开发现代基于组件的 UI（支持 React、React Native，现在还有 Vue）的最佳方式。它帮助工程师和设计师高效、交互式地 构建、浏览、评审和测试用户界面。

Storybook 在 GitHub 上拥有超过 12,000 颗星，在 NPM 上月下载量达 40 万，并被 Airbnb、Slack、Squarespace 和《纽约时报》等行业领导者使用，它是全球最受欢迎的开源 UI 开发环境。

紧随我们3.0 版本发布之后，我们很高兴在 Storybook 3.2 中推出一些强大的新功能。现在你可以：

• 在你的 Vue 项目中使用 Storybook
• 将你的 stories 组织成层级结构
• 在你的移动设备上导航 React Native Storybooks
• 还有更多！

继续阅读，了解我们为你准备的所有好东西。

Storybook for Vue

Vue 是增长最快的 Web 框架之一，因其简洁性、易用性和性能而备受喜爱。为了传播 Storybook 的理念，Norbert de Langen 和 Alexandre Bodin 与 Vue 核心团队成员 kazuya kawaguchi 联手在 3.2 版本中添加了 Storybook 对 Vue 的支持。

在 Vue 项目中开始使用 Storybook 就像馅饼一样容易

npm i -g @storybook/cli
cd my-vue-project
getstorybook
npm run storybook

Storybook 的架构很大程度上是框架无关的，因此即使是像 Vue 这样新添加的框架也能受益于 Storybook 丰富的插件生态系统。

在Storybook-Vue 公告中阅读更多关于 Vue 支持的信息。

Story 层级

如果你在处理复杂的 UI，Igor Davydkin 开发的新 Story Hierarchy 功能将是你梦想成真。

Storybook 的一个关键特性是能够将你的应用或库的所有组件状态（即“stories”）组织到单个目录中

storiesOf('Component1')
  .add('story1', () => <Component {...props1} />)
  .add('story2', () => <Component {...props2} />)

随着组件数量的增加，管理这个列表变得越来越困难。因此，Storybook 最受期待的功能之一就是能够以层级结构对 stories 进行分组。

通过语法的微小改动（默认为 / 字符，可用户配置），你现在可以创建层级嵌套的 stories 分组

storiesOf('path/to/Component', module)
  .add('story1', () => <Component {...props1} />)
  .add('story2', () => <Component {...props2} />)

你可以在本节顶部的动画中看到 Story Hierarchy 的实际应用。这是一个简单而强大的改变，并且完全向后兼容 Storybook 的先前版本。

Story Hierarchy 是 Igor 的第一个 OSS 贡献。在 Igor 的帖子中阅读更多信息，并通过给他的故事点赞来鼓励他！

React Native 设备端 UI

最后，3.2 版本带来了由 Matt Oakes、Richard Evans 和我为 React Native 项目开发的设备端 story 导航 UI。现在你不再需要使用 Web 浏览器在 stories 之间切换，而是可以直接在设备上的原生应用中完成。

启用设备端 UI 很简单。只需在 @storybook/react-native 的 getStorybookUI 中设置 onDeviceUI

const StorybookUI = getStorybookUI({ ..., onDeviceUI: true });

Storybook 对 React Native 的支持持续改进中，敬请期待 3.3 版本即将推出的更多强大的 RN 功能。

……还有一件事！

这不是 Storybook 版本的一部分，但如果你使用 VSCode 开发 React Native，请查看来自 orta 的这个巧妙设置，可以直接在你的 IDE 中导航 stories。它在VSCode 商店中免费提供。

不断前进，向上发展

作为 Storybook 的第一个社区驱动版本，3.0 版本对*组织*和*代码结构*进行了重大改革。Storybook 3.2 展现了这些努力的成果。

许多 3.2 版本的功能来自新贡献者，其中一些人对开源软件完全陌生。我们正在努力创建一个友好的社区，让大家能够轻松融入，而这次发布证明了这一点。欢迎加入我们，一起改变现代 UI 的开发方式。

这些优秀的 github 用户为 3.2 版本贡献了代码： @aaronjheinen @abhiaiyer91 @adamdonahue @ajwhite @alexandrebodin @augustinlf @blairanderson @danielduan @duncanbeevers @enjoylife @epicallan @ericwooley @evenchange4 @formatlos @formido @fvgs @gongreg @heinzmuller @hypnosphi @igor-dv @itsyogesh @jamsea @jhurley23 @joscha @kazupon @kebot @kohlmannj @ktruong888 @li0liq @lucasmotta @marcfallows @matt-oakes @matt-oconnell @mattleff @mcmunder @mjhm @mrmartineau @mvargeson @natsathorn @ndelangen @nezed @panosvoudouris @rmevans9 @rodriguesbreno @shilman @shockitv @slorber @su-narthur @tarjei @thomasbertet @thomasthesecond @tko @tmeasday @trevoreyre @ummahusla @usulpro @xavcz @z4o4z

立即获取

今天就来试试 Storybook 3.2 吧。如果你已经在用 Storybook，只需一分钟就可以升级。如果你还没用过，现在就开始使用这个开发 React、React Native 和 Vue 组件 UI 的最佳方式吧

npm i -g @storybook/cli
cd my-vue-react-or-rn-project
getstorybook
npm run storybook

如果你对新版本有疑问、问题、鼓励，或者只是表达喜悦之情，请随时通过Twitter、Slack、Github 或在下方评论区与我们联系！

❤️，Storybook 团队敬上。

特别感谢： Norbert de Langen、Tom Coleman、Oleg Proskurin、Igor Davydkin、Alexandre Bodin、Dominic Nguyen 贡献了 👌 的横幅图片。还要感谢 Storybook 社区提供的 issues、反馈、建议和鼓励！