前端进阶（7） - react、vue 组件开发利器：storybook

miya 发布于2019-08-23 11:56 / 1409人阅读

摘要：组件开发利器对于前端开发来说，组件化技术已经是一门必修课了，这其中又主要以和为主。

react、vue 组件开发利器：storybook

对于前端开发来说，组件化技术已经是一门必修课了，这其中又主要以 react 和 vue 为主。但平时在开发组件，尤其是公共组件或者第三方组件库的时候，往往会有一些困扰：

不能很好的管理多个组件，尤其是在组件预览的时候，不能一目了然

在组件预览的时候，也不能很好的反应一个组件的多个不同状态

自动化交互测试可以使用 enzyme，但很多时候还得手动测试，就比较麻烦了

在写文档的时候，需要将组件预览和文档写在一起，并需要切换到不同的状态，就比较吃力了

所以，storybook 就是为了解决这些问题而出现的，它为你的组件搭建了一个强大的开发环境，主要提供了以下的几个功能：

提供了一个强大的 UI 组件管理页面，可以很便捷、清晰的分组、管理多个组件或一个组件的多个不同状态

在自动化交互测试之外，可以很方便的进行手动交互测试，并且可以动态改变组件参数，查看视图变化

可以将组件预览导出为静态资源，这样就可以很方便查看组件的文档和不同参数对应的不同视图

还有一系列的插件，提供了很多额外的功能，帮助你更好的开发、测试、优化组件

社区已经有很多组件库都在使用 storybook 开发，比如：

react-dates 的 storybook react-dates - storybook

react-native-web 的 storybook react-native-web - storybook

再顺便截个图吧

1. 框架适配

React

React Native

Vue

Angular

Polymer

Mithril: 目前尚处 alpha 阶段

Marko: 目前尚处 alpha 阶段

HTML: 目前尚处 alpha 阶段

Svelte: 目前尚处 alpha 阶段

Riot : 目前尚处 alpha 阶段

2. 开发与命令 2.1 如何写一个 story

查看 storybook - Writing Stories，了解怎么写 stories 与怎么用插件。

2.2 添加 storybook

# 安装全局命令
npm i -g @storybook/cli

# 初始化已有项目（不会对原项目产生影响，只添加必要的配置与脚本而已）
cd my-project-directory
getstorybook

# 运行 storybook
npm run storybook

如果需要手动添加 storybook 或它的插件，可以查看：

Storybook for React

Storybook for Vue

Storybook for Angular

2.3 将组件预览导出为静态资源

# 添加到 package.json 的 scripts
{
  "export-storybook": "build-storybook -c .storybook -o .out"
}

# 运行命令
npm run export-storybook

3. 后续

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

混合云 idc机房托管 vue组件开发前端组件开发 python开发利器 vue组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97691.html

react 前端项目技术选型、开发工具、周边生态

摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识主架构：react, react-router, redux, redux...

hersion 2019-08-30 15:54 评论0 收藏0
react 前端项目技术选型、开发工具、周边生态

摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识主架构：react, react-router, redux, redux...

kidsamong 2019-08-23 14:07 评论0 收藏0
react 前端项目技术选型、开发工具、周边生态

摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识主架构：react, react-router, redux, redux...

Hanks10100 2019-08-05 15:48 评论0 收藏0
vue 前端项目技术选型、开发工具、周边生态

摘要：有目录结构书写方式组件集成项目构建等的约束，整个应用中是没有文件的，所有的响应都是动态渲染的，包括里面的元信息路径等。更多参考细说后端模板渲染客户端渲染中间层服务器端渲染开发工具开发时主要会用到的工具。 vue 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 Vue 基础知识的文章，需要熟悉 Vue 相关知识主架构：vue, vue-router, vuex UI 框...

Awbeci 2019-08-30 15:54 评论0 收藏0
vue 前端项目技术选型、开发工具、周边生态

摘要：有目录结构书写方式组件集成项目构建等的约束，整个应用中是没有文件的，所有的响应都是动态渲染的，包括里面的元信息路径等。更多参考细说后端模板渲染客户端渲染中间层服务器端渲染开发工具开发时主要会用到的工具。 vue 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 Vue 基础知识的文章，需要熟悉 Vue 相关知识主架构：vue, vue-router, vuex UI 框...

enali 2019-08-23 14:14 评论0 收藏0