在前端开发中，组件库是一个很常见的概念，它可以提供一系列的 UI 组件来帮助我们快速搭建页面。而仅仅有组件不够，我们还需要组件的预览和文档，这就是 Storybook 的存在目的。
@storybook/core 是 Storybook 的核心依赖，它提供了一个本地的开发环境，你可以在其中编写和预览你的组件。本文将会介绍如何使用 @storybook/core。
安装
--- ------- --------------- ----------
配置
添加脚本
在 package.json 中添加以下脚本：
-
---------- -
------------ -----------------
-
-添加配置文件
在项目的根目录下新建一个 .storybook 目录，并在其中添加 main.js 和 preview.js 配置文件。
main.js 的内容如下：
-------------- - - -------- ---------------------------------------------- --
这个配置告诉 Storybook 在 src/components 目录下查找 *.stories.js 文件。
preview.js 的内容如下：
------ ---------------------------
这个配置文件用于添加全局样式。
写组件
在 src/components 目录下创建一个组件以及一个对应的 *.stories.js 文件。
-- --------- ------ ----- ---- -------- ----- ------ - -- -------- -- -- - ------ ---------------------------- -- ------ ------- -------
-- ----------------- ------ ----- ---- -------- ------ ------ ---- ----------- ------ ------- - ------ ----------------- ---------- ------- -- ------ ----- ------- - -- -- --------------- ---------------- ------ ----- --------- - -- -- ----------------- ---------------- ------ ----- ----- - -- -- - ------- -------- --------- ------ -------- --------------- --
运行
运行以下命令启动 Storybook：
--- --- ---------
Storybook 启动后，在浏览器中访问 http://localhost:6006 即可查看组件的预览和文档。你可以在左侧的菜单中选择组件并查看不同的状态。同时，你也可以在右上角的 Actions 选项卡中执行一些交互动作。
总结
本文介绍了如何使用 @storybook/core 配置并运行 Storybook，以及如何编写组件和预览文件。通过学习本文，你应该可以使用 Storybook 为你的组件库提供更好的文档和预览支持。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/98570