swagger-editor编写好api文档在哪用？这个工具你得了解

写在前面：众所周知swagger-editor是用来编写api文档的，虽然在swagger-editor工具给出了实时预览的功能，但也只能是开发者或者说是编写者看到，如果交到团队协作，就显得有点力不从心了。我们知道使用swagger-editor这个工具一般有两种方法，一种呢是将swagger-editor工具加入到我们的工程文件中，使用代码自动生成api文档，这种一般通过项目部署，当服务器启动之后团队成员可以通过项目地址访问到文档。这种是很方便的，但是不是每一个项目都需要这么做。这就需要讲出第二种使用方法---swagger-ui，swagger官方专门为swagger-editor量身定做的api文档阅读工具。下面给大家介绍swagger-ui的安装与使用方法。

swagger-ui安装文件下载与安装

swagger-ui安装文件可以通过git克隆下来，具体的下载地址我会放在评论区。

文件下载成功之后，可以得到swagger-ui安装文件，我们可以通过命令行窗口或者使用vs code软件打开安装文件。进入dos窗口的方法：进入swagger-ui文件夹，然后按住shift键，右键鼠标从菜单栏里选择在此处打开命令窗口即可进入dos。下图给出操作截图：

进入命令行窗口方法

首先需要安装依赖，命令格式:npm install，如果npm命令不稳定，可以安装淘宝cnpm镜像

 （安装命令：npm install cnpm -g --registry=https://registry.npm.taobao.org）

安装依赖

安装好依赖之后，需要安装一个轻量http全局服务器。

安装命令：cnpm install http-server

服务器安装成功之后就可以启动

启动命令：http-server

启动服务器

启动成功之后，可以在浏览器中输入下面的访问地址，也可以在vs code中按住ctrl键单井进入浏览器自动访问，默认页面index映射成功之后如下图所示。此时swagger-ui安装成功！

访问地址（例）：http://127.0.0.1:8080/dist/index.html

启动成功界面

swagger-ui打开swagger-editor保存的yaml或者json文件

当我们使用完swagger-editor编写完api文档之后，可以点击页面上方的File选择save as yaml或者convert and save as json下载swagger.yaml或者swagger.json文件。操作如下图所示：

保存swagger.yaml文件

然后将swagger.yaml或者swagger.json替换到安装文件的dist文件夹下。操作目录如下图所示：

替换为自己的swagger.yaml

修改index.html文件里面的映射地址，如下图所示操作：

修改映射地址

最后可以重新启动服务器，然后访问地址：

http://localhost:8080/dist/index.html

请注意这里写成localhost的原因是因为我们定义的index.html文件中配置的链接地址也是localhost，这样可以避免跨域的问题，也就能成功访问到我们的api文档了！

api文档

这就是我这次给大家分享的swagger-ui的安装以及使用方法，如果大家在使用过程中有一些问题或者好的想法可以与浩浩讨论，毕竟浩浩也是初学者，一起学习一起成长！