VueJS文档生成

luciozhang

发布于 2023-04-22 16:31:25

1.8K0

发布于 2023-04-22 16:31:25

1. 安装JSDoc 3

npm install -g jsdoc

2. 安装jsdoc-vuejs插件

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

npm install --save-dev jsdoc-vuejs

3. 配置JSDoc

新建conf.json文件

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

4. 安装模板文件

minami

npm install --save-dev minami

5. JSDoc语法

文档

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

@vue-prop

@vue-data

@vue-computed

用法和@param一样。

6. 生成文档

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

像这样：

/**
  * @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 点击事件
  */

然后在工程目录下