storybook的介绍和使用比较火的响应式UI开发及测试环境 ...

最新推荐文章于 2025-07-01 20:24:53 发布

转载最新推荐文章于 2025-07-01 20:24:53 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/681862

文章标签：

#ui #javascript #json #ViewUI

本文介绍Storybook这一流行的响应式UI开发及测试工具。它可用于可视化开发调试React和Vue组件，并通过编写story来展示不同状态下的UI组件表现。文章还介绍了如何在现有React项目中安装和配置Storybook。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

storybook是一套最近比较火的响应式UI 开发及测试环境。
可以可视化开发调试react，vue组件
官网：https://github.com/storybooks/storybook
至于为什么叫storybook，应该是敏捷开发中的user story有关，找了篇文章，不了解的同学可以看下

根据官网介绍一个story是一个或多个UI组件的单一状态，基本上像一个可视化测试用例。
打开这个，这是airbnb公司实现的一个react的datepicker组件。这个组件配置很多，怎么让大家直观的查看学习呢？他就利用storybook写了很多story，左侧的每一项点开后是datepicker组件不同的状态或配置，就是一个个story。

storybook本身提供了很多组件，也可以添加自己的组件作为story，方便他人查看，使用并测试。

使用storybook你需要有react或vue的开发经验，并且熟悉es6。

下来带大家简单使用一下：

首先全局安装storybook命令：
npm i -g @storybook/cli
来到一个已存在的react项目，可以是由creat-react-app创建的
在根目录执行 getstorybook 命令
会出现如下画面

安装storybook

发现这个命令实际修改了package.json，对比如下

image.png

然后又多出来个名为.storybook的目录，里面有附件组件文件 addons.js 和 config.js

安装后根据提示执行 yarn run storybook 启动storybook服务，浏览器打开 http://localhost:9009

image.png
这个页面是咋生成的呢，我们打开\src\stories\index.js一看便知

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import { Button, Welcome } from '@storybook/react/demo';

// 文档 https://storybook.js.org/basics/writing-stories/
// storiesOf应该是分组，每组添加一个个story
// 修改内容页面会实时发生变化
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

// 使用action让storybook去记录log,可以在页面的action logger中查看
storiesOf('Button', module)
  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
  .add('with some emoji', () => <Button onClick={action('clicked')}>   </Button>);

今天就先研究到这里