在前端开发过程中，我们经常需要构建 UI 库或组件库，在开发和测试过程中也需要一个好用的工具来展示和测试我们的组件。Storybook 便是一个很好的选择。而 @nlabs/storybook-cli 则是一个非常方便的工具，可以帮助我们轻松地搭建和管理 Storybook。
安装
首先，我们需要通过 npm 安装 @nlabs/storybook-cli：
--- ------- -- --------------------
创建一个新项目
创建一个新项目很简单，只需要通过以下命令就可以快速创建一个新的 Storybook 项目：
------------- ----
然后根据命令行提示，输入项目名称、安装选项、想要使用的 UI 框架等信息即可。
运行
创建项目后，我们就可以通过以下命令启动 Storybook：
--- --- ---------
然后在浏览器中访问 http://localhost:6006/，就可以看到 Storybook 运行的页面了。
添加和开发组件
接下来，我们可以开始添加和开发组件了。在 src/components 目录下新建一个组件，例如 Button 组件：
------ ----- ---- --------
----- ------ - -- -------- -------- -- -- -
------ -
------- ------------------
----------
---------
-
-
------ ------- -------然后在 src/stories 目录下新建一个 Button.stories.js 文件：
------ ----- ---- --------
------ - --------- - ---- -------------------
------ ------ ---- -----------------------
------------------------------ -------
--------------- -- -- -
------- ----------- -- ------------------------
----- ---
---------
---在这里，我们使用 storiesOf 方法创建一个新的组件故事，并指定故事的名称（这里为 Components/Button），然后通过 .add 方法添加一个子故事，并在其中使用我们刚刚创建的 Button 组件。
最后，运行 npm run storybook，就可以看到我们的 Button 组件在 Storybook 中展示了出来。
总结
通过这篇文章，我们学习了如何使用 @nlabs/storybook-cli 快速搭建和管理 Storybook 项目，以及如何添加和开发组件，并在 Storybook 中展示出来。通过使用 Storybook，我们可以更好地组织和测试我们的组件，提升开发效率，提高代码质量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056cd881e8991b448e67de