在现代前端应用中，构建交互式的 UI 组件库是非常重要的一项任务。而 Storybook 是一个工具，它能够帮助我们构建和展示我们创建的 UI 组件库。@storybook/polymer 是 Storybook 的 Polymer 框架适配器。本文将介绍如何使用 @storybook/polymer 帮助我们开发、测试和展示我们的 Polymer 组件库。
安装
首先，我们需要安装 @storybook/polymer 和其他的依赖项：
--- ------- ---------- ------------------ -----------
创建 Storybook 配置文件
接下来，我们需要创建 Storybook 的配置文件。我们可以通过在项目的根目录下创建一个名为 .storybook 的文件夹来实现这一点。然后，在该文件夹内建立一个名为 config.js 的文件，并添加以下代码：
------ - --------- - ---- --------------------- --------------------------------------- ----- ------------------ --------
然后，我们需要在我们的项目根目录下创建 stories 文件夹，并在其中创建一个名为 Button.stories.js 的文件，以便我们可以为我们的 Button 组件创建一些 Storybook stories。
创建我们的 Polymer 组件
接下来，我们需要创建我们的 Polymer 组件。我们的 Button 组件需要支持一个 label 的属性，并在点击时触发一个自定义事件 button-clicked。以下是一个简单的 Button 组件的例子：
----- ------------ ---------------------------------------
----------- ---------------
----------
------- -------------------------- ----- -----------
-----------
--------
----- -------- ------- --------------- -
------ --- ---- - ------ ------------ -
------ --- ------------ -
------ -
------ -
----- -------
------ ------ ----
-
--
-
-------------- -
---------------------- ----------------------------- - -------- ---- ----
-
-
---------------------------------- ----------
---------
-------------创建 Storybook stories
现在，我们已经准备好为我们的 Button 组件创建一些 stories 了。在我们的 stories/Button.stories.js 文件中，我们将导出一个名为 default 的 story：
------ - --------- - ---- --------------------- ------ - ---- - ---- ----------- ------ --------------- ------------------- ------- --------------- -- -- --------------- ------------ --------------------
这里，我们使用了 LitHTML 模板，而不是 Polymer 的模板语法，因为 Storybook 默认支持 LitHTML。
运行我们的 Storybook
现在，我们已经完成了我们的组件和 stories，我们可以运行 Storybook 了。在命令行中运行以下命令：
--- --- ---------
然后，你就可以在你的浏览器中运行你的 Storybook 了！看起来像这样：
你可以在左侧的导航栏中看到我们的 Button 组件，并在右侧的窗格中查看我们的 story。
总结
@storybook/polymer 为我们的 Polymer 组件提供了一个方便的方法来构建、测试和展示我们的 UI 组件库。在这篇文章中，我们学习了如何安装 @storybook/polymer，如何创建 Storybook 配置文件，如何创建 Polymer 组件，如何创建 Storybook stories 以及如何运行我们的 Storybook。通过理解这些概念并实践它们，我们可以创建出更好的 UI 组件库，并能更轻松地开发和维护它们。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb593b5cbfe1ea0611454