Swagger 是一种简单、强大的 RESTful API 的文档在线自动生成+功能测试的工具，使API文档编写变得非常简单；Swagger-UI 是 Swagger 可视化渲染工具之一，可以帮助开发者直观、友好地显示自己的 API 文档。
在前端使用 Swagger-UI 时，我们推荐使用 npm 包 swagger-ui-dist。本文将会详细介绍 swagger-ui-dist 的使用步骤并提供示例代码。
1. 安装
使用 npm 安装 swagger-ui-dist：
npm install swagger-ui-dist --save-dev
2. 导入
在页面中导入 swagger-ui-dist 的前端资源：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ----------
----- ---------------- ---------------
-----------------------------------------------------
-------
------
---- ----------------------
------- -------------------------------------------------------------------
------- ------------------------------------------------------------------------------
--------
------------- - ---------- -
-----------------
---- ---------------------------------------------
------- --------------
-------- -
-----------------------------
-------------------------
--
------- ------------------
--
-
---------
-------
-------示例代码中我们使用了 Swagger Petstore 的 API 文档链接，并使用了 SwaggerUIBundle、SwaggerUIStandalonePreset 和 StandaloneLayout，可以根据自己的需求进行更改和定制。
3. 运行
在终端中使用命令行运行项目：
npm start
浏览器会自动打开项目运行界面，页面顶部会展示 API 文档地址。
4. 使用
使用 swagger-ui-dist 可以方便地在前端展示 API 文档，使得我们可以直观地查看和测试 API 接口。
swagger-ui-dist 的使用方法见下：
-- -------------------- ---- -------
-----------------
---- --------------------------------------------- -- --- ----
------- -------------- -- -----
-------- -
-----------------------------
-------------------------
--
------- ------------------
--在使用时需要将 url、dom_id、presets 和 layout 等信息进行设置。
结语
swagger-ui-dist 是前端展示 Swagger API 文档的常用工具之一。我们可以通过这个工具方便地查看和测试 API 接口，帮助我们更好地理解和使用接口，提高效率和质量。
希望本文能够帮助开发者学习和使用 swagger-ui-dist，并为日后的 API 接口开发带来便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/80396