最近，在 Leader 的建议下，去看了看 emotion 和 storybook 的相关文档。学习过后，小有收获。因此，这次将以我自己的视角带你们体验一下 storybook，也算是对我自己学习过程中的一个 review。

何为 storybook

什么是 storybook？ storybook 是一个 javascript 工具，它能够构建 UI 组件，适用于 React、Vue、Angular 等环境。story 可以存储一个 UI 组件的渲染状态，一个组件可以写多个 story 来描述组件的不同状态。它是当前很受欢迎的 UI 组件开发环境。

安装 storybook

在这里我用的是 vite 方式创建 react 项目的，即 npm init vite。然后可以开始安装 storybook 了。（安装过程比较慢，不知道是不是因为 vite 创建 react 项目的原因，如果有大佬了解的可以在评论区讨论一下）

// 创建react项目
npm init vite 

// 安装storybook
npx -p @storybook/cli sb init --type react 

运行 storybook

安装完成后，就可以将 storybook 运行起来。运行的过程中会有一个报错（同上一样，不知道是不是因为 vite 创建项目的原因），如下所示：

这个报错的意思是找不到相关的 typescript 模块。因此，我通过 npm i typescript 方式安装了 typescript。

// 安装typescript
npm i typescript 

成功安装之后，便可以启动，效果如下所示：

// 运行storybook
npm run storybook 

因为是缺少 typescript 模块，所以在之后为也用 react + ts 的方式创建了项目，安装好 storybook 之后，可以直接运行 storybook，并未出现报错。因此它的运行环境应该和 typescript 有一些联系。

文件配置介绍

上面步骤完成后，我们来看看在项目中新增的文件夹。在安装完成后，项目目录下多出一个 .storybook 文件夹，这个文件夹主要是存放相关配置的。

然后在 src 目录下会多出 stories 文件夹，它是存放 story 的。前面说到过，story 可以存储一个 UI 组件的渲染状态，一个组件可以有很多不同状态的 story。stories 文件夹中默认有按钮、头部、页面这三个组件。

总结

以上就是 storybook 的介绍，如何安装以及运行了。如何使用该环境去创建自定义的 UI 组件，后期会持续更新，大家可以关注一下。

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享