在前端开发过程中，我们经常需要使用类似 Storybook 这样的工具来帮助我们组织并展示组件。在 Ember 框架中，@storybook/ember 是一个优秀的 npm 包，它提供了一个漂亮且易于使用的用户界面，帮助我们快速调试和展示我们的组件。
在本文中，我们将会深入探索如何使用@storybook/ember 包。我们将涵盖从安装到配置，再到创建并展示组件的全过程，同时还会介绍一些高级功能。
安装@storybook/ember
在使用@storybook/ember 之前，我们需要先确保我们已经安装了 Node.js 和 npm 客户端。当然我们也需要一个 Ember 应用程序，这里就不再赘述了。
打开命令行终端，进入到您的应用程序根目录下，然后执行以下命令安装@storybook/ember：
npm install --save-dev @storybook/ember
安装完成之后，我们需要在应用程序中添加一条 script 命令以方便运行 Storybook。打开 package.json 文件，添加以下内容：
{
"scripts": {
"storybook": "start-storybook -p 6006"
}
}现在，我们可以执行以下命令来启动 Storybook：
npm run storybook
接下来，我们需要创建一个配置文件，以定义 Storybook 的一些基本设置。
创建配置文件
在您的应用程序根目录下创建一个名为.storybook 的新目录。在该目录下，我们将创建一个名为 main.js 的主配置文件，以及其它必要的文件：
mkdir .storybook && cd .storybook touch main.js
在 main.js 文件中，我们将定义 Storybook 的一些基本配置和插件。下面是一个基本的示例：
module.exports = {
stories: ['../src/**/*.stories.js'],
addons: [
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-storysource'
],
};该配置文件仅包含三个关键设置：
- stories：定义 Stories 的位置，即文件存储位置
- addons：用来添加 Storybook 插件。
开始使用 Storybook 之前，请先确保您熟悉 Ember 中使用 Stories 的基本知识。
创建 Stories
我们准备好了一切，现在开始编写我们的第一个 Story。请注意，如果您执行 npx ember generate component YOUR_COMPONENT_NAME，你将自动创建一个 YOUR_COMPONENT.js 文件，用于编写组件。在这里，我们将使用 YOUR_COMPONENT_NAME.stories.js 文件来编写 Stories。
打开 YOUR_COMPONENT_NAME.stories.js 文件，并添加以下代码：
-- -------------------- ---- -------
------ - ------ - ---- ---------------------------
------ - ------ - ---- -------------------------
------ ------------------- ---- ------------------------
------ ------- -
------ ----------------------
---------- --------------------
--
------ ----- ------- - -- -- --
---------- --------------------
------ -
-------- -----
------ ---------
-------- ------------------
--
---
------ ----- --------- - -- -- --
---------- --------------------
------ -
------ ---------
-------- ------------------
--
---
------ ----- ---------------------- - -- -- --
---------- --------------------
------ -
------ --- -- ------- -------
-------- ------------------
--
---
----------------- - -------- --------
------------------- - ---------- --------我们通过导入@storybook/addon-actions 和@storybook/addon-links，在 Stories 中添加了事件处理程序并创建了一个具有交互式的按钮组件。
现在我们已经成功创建了我们的第一个 Story，可以运行 Storybook 并在浏览器中预览你的组件。
在浏览器中打开 localhost:6006，就可以看到 Storybook 的 UI 界面。在左面的菜单栏中，可以看到 YOUR_COMPONENT_NAME 组件和每个 Story 的名称。
选择 Primary，Secondary 或 WithLinkToAnotherStory 将可以看到您的组件。点击 interactivity 标签，您可以测试事件处理程序并看到它们能否成功触发。
组件文档
现在 Storybook 已经能够漂亮地展示您的组件并在您的组件中添加交互式事件处理程序。我们还可以添加文档，为组件添加描述和示例。
在 YOUR_COMPONENT_NAME.stories.js 文件中，添加一个 docs 对象，以为组件添加一些文档。现在我们来添加文档：
-- -------------------- ---- -------
------ - ------ - ---- ---------------------------
------ - ------ - ---- -------------------------
------ ------------------- ---- ------------------------
------ ------------- ---- --------------
------ ------- -
------ ----------------------
---------- --------------------
----------- -
-------- -
-------- ------- -------
--
----- -
------------ -
---------- --- ------ ------ -----------
--
------- -
----- -------- ----------------- --------------
--
------ - --------- ------------- --
--
--
--
------ ----- ------- - -- -- --
---------- --------------------
------ -
-------- -----
------ ---------
-------- ------------- -------
--
---
----------------- - -------- --------在此示例中，我们使用 markdownNotes 变量并将其设置为存储组件文档的 README.md 文件的路径。此外，我们还使用了 docs 对象，并可以在其中添加自定义的 text、source 和 notes 属性。
你可以打开 localhost:6006/docs，就可以访问文档页面了。
总结
在本文中，我们深入介绍了如何使用@storybook/ember 包。我们通过安装和配置包，并添加代码示例和文档，演示了如何在其中创建并展示我们的组件。
作为一个前端开发人员，现在你已经掌握了一个非常有用的开发工具，并可以在您的 Ember 项目中使用 Storybook 进行舒适的组件开发。
希望你喜欢这些内容，我们期待看到您的组件在 Storybook 中的漂亮展示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb592b5cbfe1ea0611451