程序员最讨厌的两件事情，第一种是写文档，另一种是别人没有写文档。有没有直接根据vue组件生成文档的呢？当然是有的的。但第三方使用起来不一定能和现有项目结合使用，往往需要额外的注释用来标记提取信息。使用第三方的一些比较常见问题

• 文档提取信息不全面，可能有些信息你需要提取但是它又不支持。这种情况下就只能修改三方的插件源码了。
• 需要额为的注释信息来标记，例如 vuese 需要给方法 打 @vuese、@arg 等标记来提供方法信息。

俗话说自己动手丰衣足食，打造自己的vue文档生成工具与自己项目结合使用。一个组件文档大致需要提供 组件名称和描述(name)、组件属性(props)、组件方法(methods)、组件事件(event)、插槽(slot) 这几个部分，以及还需要这个几个部分的注释组成生成描述信息。接下来一步步实现对着几个部分的提取实现。

解析.vue 文件

一般一个.vue文件分三个部分 template、script、style、style部分的内容我们不需要，我们需要分别提取出 template 和 script 内容。Vue官方开发了 Vue-template-compiler 库专门用于Vue解析，我们可以直接使用它来解析提取.vue文件， Vue-template-compiler 提供了一个 parseComponent 方法可以对原始的Vue文件进行处理。

const compiler = require(‘vue-template-compiler‘)
const result = compiler.parseComponent(vueStr, [options])

// parseComponent 返回 template、script、style内容，
export interface SFCDescriptor {
template: SFCBlock | undefined;
script: SFCBlock | undefined;
styles: SFCBlock[];
customBlocks: SFCBlock[];
}

拿到各个部分文本后，还需要将它转成ast(抽象语法树)，template 部分内容可以直接使用 Vue-template-compiler 提供的 compile 方法直接生成ast， script部分需要借助其他的生成ast了，这里使用 babel 的模块来处理 js 文本。

const compiler = require(‘vue-template-compiler‘)
//vueStr .vue 文件内容
const vue = compiler.parseComponent(vueStr)

//生成html部分的 ast
let template = compiler.compile(vue.template.content, {
preserveWhitespace: false,
comments: true // 生成注释信息
})

使用 @babel/parser（Babel解析器,是Babel中使用的JavaScript解析器）来处理js 文本内容。

const parse = require(‘@babel/parser‘);

//生成js部分的 ast
let jsAst = parse.parse(vue.script.content, {
allowImportExportEverywhere: true
})

提取文档信息

通过上一步的文件解析工作，我们成功获取到了Vue的模板ast和script中的js的ast，下一步我们就可以从中获取我们想要的信息了。这里需要使用到 @babel/traverse 这个工具，用来遍历 js ast 的节点工具。可以在这里查看 ast 的生成内容，方便查看各种节点信息。

const traverse = require(‘@babel/traverse‘);
traverse.default(jsAst, {
enter(path){ // 开始

},
// 支持自定义节点 比如当节点类型 为 ExportDefaultDeclaration 时掉这个方法
ExportDefaultDeclaration(){

}
})

提取组件名称、描述、props、methods、model

export default 生成的对应节点类型是 ExportDefaultDeclaration，declaration 属性就是对应的组件的 options 了，遍历 declaration 的属性可以获取到 name、props、methods、model 等节点信息。

示例

let componentInfo = {}
traverse.default(jsAst, {
ExportDefaultDeclaration(path){
path.node.declaration.properties.forEach(item => {
switch (item.key.name) {
case ‘props‘:
componentInfo.props = extractProps(item) // 提取 props
break;
case ‘methods‘:
componentInfo.methods = extractMethods(item) // 提取 methods
break
case ‘name‘:
componentInfo.name = item.value.value // 获取组件名称
break
case ‘model‘:
componentInfo.model = extractModel(item) // 提取 model
break
default:
break;
}
});
}
})

打造自己的vue文档生成工具