VueJS文档生成

1. 安装JSDoc 3

http://usejsdoc.org/index.html

代码语言：javascript复制

npm install -g jsdoc

2. 安装jsdoc-vuejs插件

https://github.com/Kocal/jsdoc-vuejs

代码语言：javascript复制

npm install --save-dev jsdoc-vuejs

3. 配置JSDoc

新建conf.json文件

代码语言：javascript复制

{
  "plugins": [
    "node_modules/jsdoc-vuejs"
  ],
  "source": {
    "includePattern": "\.(vue|js)$"
  },
  "opts": {
    "destination": "./doc",
    "encoding": "utf8",
    "private": true,
    "recurse": true,
    "template": "node_modules/minami"
  }
}

4. 安装模板文件

minami

代码语言：javascript复制

npm install --save-dev minami

5. JSDoc语法

文档

jsdoc-vuejs插件新增了以下几个块标签

@vue-prop

@vue-data

@vue-computed

用法和@param一样。

6. 生成文档

在需要文档的地方，用块标签注释。

像这样：

代码语言：javascript复制

/**
  * @classdesc 按钮
  * @vue-prop {String} value                 - 文本
  * @vue-prop {String} [width='265wx']       - 宽度
  * @vue-prop {String} [height='35wx']       - 高度
  * @vue-prop {String} [fontSize='16wx']     - 文本字号
  * @vue-prop {String} [fontColor='#ffffff'] - 文本颜色
  * @vue-prop {String} [fontStyle='normal']  - 文本风格，可选normal或blod
  * @vue-prop {Boolean} [disable=false]      - 是否不可点击
  * @vue-prop {String} [srcNormal=默认图片]    - 按钮背景图片
  * @vue-prop {String} [srcDiable=默认图片]    - 按钮不可点击背景图片
  *
  * @emits clickbtn 点击事件
  */

然后在工程目录下

代码语言：javascript复制

 jsdoc -c ./conf.json ./src/*

完成！

效果是这样的：

data jsdoc 插件 配置 语法

0 人点赞