什么是 vue-docgen-api?
vue-docgen-api 是一个可以解析 Vue.js 组件文件的工具库，可以生成 JSON 文件，包含 Vue 组件的所有完整信息，在编写组件文档或是生成 API 时非常方便。
如何使用 vue-docgen-api?
安装
npm install vue-docgen-api --save-dev
准备生成文件
为了便于生成 API 文档的查看，首先需要安装 vue-docgen-cli
npm install vue-docgen-cli --save-dev
命名生成 API 文档脚本
在项目的 devDependencies 中，打开 package.json 文件，添加一个命名脚本叫作 generate-docs。
"scripts": {
"generate-docs": "vue-docgen generate src/components/**/**/*.vue --outfile docs/components.json
}添加元数据注释
在你的 Vue 组件文件中添加注释，用于添加元数据。注释必须是大括号内部的一个键值对，并且键值对中的键名必须以 @ 开头。
-- -------------------- ---- ------- --- - ---------- ----------- - ------ --------- ----------- - - ------ -------- ----- --- ----- -- --- --------- - ------ -------- ---------- --- -------- -- --- --------- - ------ --------- ------------ ------- -- --- -- --- --- --------- -- ---- ---- - - ----- ---- -- - ---- ----------- - - -------- ------ ------- - - ------ - ------------- ------------ ------ -- - --- - - -------- ---- ------- - - ------ - ------------- ------------ ------- - ------- -- - -------- - --------------- - --- --
生成 API 文档
运行 generate-docs 命令，为 src/components 目录下的所有 Vue 组件文件生成 JSON 文件，文件夹为 docs，文件名为 components.json。
npm run generate-docs
使用生成的 API 文档
之后在你的项目中，你可以通过 require 或 import 加载 JSON 文件，这样你就可以对 JSON 文档进行解析或是根据 JSON 文件生成 API 文档。
const docs = require('./docs/components.json');总结
在我们开发和维护大型 Vue 项目时，可生成自动化的文档或 API 可以极大提高效率，vue-docgen-api 工具可以帮助我们做到这点，很好的解决了编写文档和API 文档生成的痛点。
示例代码
请参照本文中的代码片段。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/142124