什么是 npm
npm 是 Node.js 的包管理器，能够让我们方便地发布、安装、更新和管理 Node.js 模块。
npm 官网：https://www.npmjs.com/
什么是 storyboard
Storyboard 是一款基于 React 的可视化组件交互框架，可以帮助我们快速地创建和演示界面的交互过程。
Storyboard 官网：https://storybook.js.org/
安装和运行 storyboard
安装
我们可以通过 npm 来安装 storyboard：
npm install @storybook/react --save-dev
运行
安装完成后，我们可以在项目的根目录下创建一个 .storybook 目录，然后在该目录下创建一个 config.js 文件：
import { configure } from '@storybook/react';
configure(require.context('../src/stories', true, /\.stories\.js$/), module);这样就可以在项目根目录下通过以下命令来运行 storyboard 了：
npm run storybook
创建 Story
Story 是什么
Story 是一个组件的展示方式。我们可以通过 Storybook 来演示单个组件的不同状态、属性以及行为。
创建 Story
我们可以在 .storybook 目录下创建一个 stories.js 文件，来管理我们的 Story。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- -------------------
------ ------ ---- -----------------------
------------------- -------
---------- ------ -- -- -
------------- ---------------
--
---------- ---- ------- -- -- -
---------- -- -- -----------
---在上面的例子中，我们创建了一个名为 Button 的 Story，然后分别定义了两个展示方式，一个是带有文本的按钮，另一个是带有表情符号的按钮。
运行命令 npm run storybook，就可以在浏览器中看到结果了。
总结
Storyboard 是一款非常好用的可视化组件交互框架，可以帮助我们快速地创建和演示界面的交互过程。我们可以通过 npm 来安装和管理 Storybook，同时也可以通过创建 Story 来使组件更加直观和易于理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69658