Storybook 3.2 发布
Vue 支持、Story 分层、RN 设备 UI 及更多！
Storybook 是在 React、React Native 以及现在的 Vue 中开发现代组件化 UI 的最佳方式。它帮助工程师和设计师高效且交互式地构建、浏览、审查和测试用户界面。
Storybook 在 GitHub 上拥有超过 12,000 个 star，NPM 上每月下载量达 40 万次，并被 Airbnb、Slack、Squarespace 和纽约时报等行业领导者使用，它是世界上最受欢迎的开源 UI 开发环境。
紧随 3.0 版本发布之后，我们很高兴在 Storybook 3.2 中推出一些强大的新功能。现在你可以
- 在你的 Vue 项目中使用 Storybook
- 将你的 Story 组织成层级结构
- 在你的移动设备上导航 React Native Storybook
- 以及更多！
继续阅读以了解我们为你准备的所有好东西。
用于 Vue 的 Storybook
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 storybookStorybook 的架构在很大程度上与框架无关，因此即使是像 Vue 这样新添加的框架也受益于 Storybook 丰富的 插件生态系统。
阅读 Storybook-Vue 发布公告，了解更多关于 Vue 支持的信息。
Story 分层
如果你正在处理复杂的 UI，Igor Davydkin 开发的全新 Story 分层功能将使你梦想成真。
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 分层的实际效果。这是一个简单而强大的更改，并且与以前版本的 Storybook 完全向后兼容。
Story 分层是 Igor 的第一个 OSS 贡献。在 Igor 的文章中阅读更多相关信息，并通过给他的 story 点赞来鼓励他！
React Native 设备 UI
最后，3.2 版本为 React Native 项目带来了设备端 story 导航 UI，由 Matt Oakes、Richard Evans 和我共同开发。现在你不再需要在 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 版本的功能来自新的贡献者，其中一些人完全是 OSS 新手。我们正在努力创建一个友好的社区，让大家可以轻松融入，而这个版本证明了这一点正在奏效。快来加入我们，一起改变现代 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 社区提出的问题、反馈、建议和鼓励！