前言
在开发 Web 应用时，我们经常需要对 UI 组件进行交互和测试。但是，手动地进行测试很费时费力，而且容易出错。因此，我们需要一种简单的方法来测试 UI 组件。
在前端项目中，Storybook 是一款非常好用的工具，它可以帮助我们快速地开发、测试和交互 UI 组件。本文将介绍如何使用 Storybook 的 Riot 版本：@storybook/riot。我们将详细地讲解该包的安装和使用方法，并通过几个示例代码，演示如何使用 @storybook/riot 开发和测试 UI 组件。
安装 @storybook/riot
使用 @storybook/riot 之前，我们需要新建一个空的工程并安装 Node.js。在终端中输入以下命令：
npm install --global @storybook/cli
在全局安装了 Storybook 后，在开发项目的根目录下，输入以下命令生成 Storybook 项目：
npx sb init --type riot
在成功执行以上命令后，我们可以使用以下命令启动 Storybook:
npm run storybook
这时候，我们就可以在浏览器中访问 http://localhost:6006/ 来查看 Storybook 的页面啦！
使用 @storybook/riot
我们来通过一个简单的组件示例，演示如何使用 Storybook 和 @storybook/riot 进行组件的开发和测试。首先，我们在项目中新建一个文件夹 called components，并在其中新建一个组件 Welcome.riot，如下所示：
-- -------------------- ---- -------
----------
-----
----- ------- ------
------
-----------
--------
------ ------- -
---------- -------- -- ----------
-
---------在上面的代码中，我们定义了一个 Welcome 组件，它包含了一个 h1 标签，并使用了一个 message 变量。
然后我们在 .storybook/ 目录下创建 config.js ，编写 Storybook 的配置文件。
import { configure } from '@storybook/riot';
configure(require.context('../components', true, /\.stories\.js$/), module);在配置文件中，我们调用 configure 函数，并传入一个上下文对象来声明它将在哪里寻找我们的 stories。
接下来，在 components 文件夹下新建一个文件 Welcome.stories.js，编写我们的故事内容。这个故事将展示 Welcome 组件的效果。
import { storiesOf } from '@storybook/riot';
import './Welcome.riot';
storiesOf('Welcome', module)
.add('default', () => '<welcome></welcome>');在上面的代码中，我们使用 storiesOf 函数创建了一个名为“Welcome”的 stories 对象，接着使用 .add 方法添加默认状态下的 story。在 add 方法中，我们使用了 HTML 字符串来渲染 Welcome 组件。
最后，在 Welcome.stories.js 的同级目录下，新建 notes.md 文件，编写一些组件的说明和使用方法。这些内容将被 Storybook 的文档部分使用。
-- -------------------- ---- ------- - ------- -- ---------- -- ---- ----- ------ ----------------- -------------------
Props
message: 欢迎语句，默认为 "Welcome to Storybook"
接下来，我们启动 Storybook，并查看 Welcome 组件的效果。
npm run storybook
-- -------------------- ---- ------- -- ---------------------- --------- ------- --------------------- --------- ---------- -- -- -------------- --------------- --- -- ------- ----------------------------------------------------- --------- ------------------------------ --------- - --------------------------------- - ------------------------------------------------------------------------------ -------- ------------------------------------------------------------------------------------------------------------------------