近些年，Web 前端技术正在蓬勃发展，前端组件库极度丰富。如何选择一个好用的前端组件库显得尤为重要。@ui-kit/docs 是一款非常优秀的前端组件库文档生成工具，它可以快速构建文档网站和演示站点。
安装
使用 @ui-kit/docs 需要在项目的根目录下执行以下命令安装：
npm i @ui-kit/docs --save-dev
使用
@ui-kit/docs 是一种文档生成工具，它会根据指定的组件源代码生成可交互的文档页面。一般情况下，我们需要将源码和组件的 API 文档写在同一个文件里，然后通过特殊的注释将 API 抽取出来。
我们可以通过以下命令启动 @ui-kit/docs 的开发服务器，预览效果：
ui-kit docs-dev
只有在写完组件文档后，我们才会“正式”地构建文档网站。此时，我们需要执行以下命令：
ui-kit docs-build
示例
下面是一个简单地使用示例，我们先在根目录下新建一个文件夹 src，并在其中新建子目录 Button，并在其中新建文件 Button.tsx，输入以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
--------- ----- -
---------- --------
--------- -- -- -----
------ ---- - --- - --- - --- - -----
-
------ ----- ------ - --
-------- - ------
------- - -- -- ---
---- - ----
---------
-- ----- - ---------------------------------------- -- -
-------
-------------------
-----------------
------------------ ---------
-
----------
---------
--然后我们在 Button.tsx 的顶部加入注释：
-- -------------------- ---- ------- --- - ----- -- --- ------ ---------- - - -------- - ------ - ------ - ------ - ---- ---------------------- - - -- --- - - ------- ----------- -- ---------------------------- ------------ - --- -- ------ ----- ---- -------- -- ---
上面的注释加入了对 @example 关键字的支持。使用它可以为组件添加示例代码。在示例区域里，我们可以引用这段代码，将其嵌入到在线文档中。我们可以运行以下命令，生成在线文档：
ui-kit docs-build
最后，在浏览器中访问 http://localhost:3000/Button 即可看到文档示例。
指南
@ui-kit/docs 的使用非常灵活。我们可以自行配置源代码的位置，因此即使使用不同的框架也不成问题。
如果想详细了解 @ui-kit/docs 的内部工作原理，可以参考官方文档中的详细说明。希望以上内容对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607c81e8991b448deb10