想写出复用性强的组件？快来试试 Storybook 吧

简介

Storybook 是 UI 组件的开发环境，它允许开发者浏览组件库，查看每个组件的不同状态，以及交互地开发和测试组件。

Storybook 可帮助你记录组件以供重用，并自动对组件进行可视化测试以防止出现错误。

开始

在对 Storybook 有了大致的了解之后，下面就让我们把 Storybook 启动起来吧！

Storybook 需要安装到已经设置了框架的项目中。它不适用于空项目。这里我使用的是 React，首先我们进入空项目安装 React，这里推荐使用官方脚手架安装：

npx create-react-app my-app 

安装完成后进入项目目录：

cd my-app 

之后再安装 Storybook，命令如下：

npx storybook init 

安装完成后将 Storybook 启动：

npm run storybook 

启动成功后，页面如下：