VueJS文档生成

476 阅读1分钟
1. 安装JSDoc 3

usejsdoc.org/index.html

npm install -g jsdoc
2. 安装jsdoc-vuejs插件

github.com/Kocal/jsdoc…

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

然后在工程目录下

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

完成!

效果是这样的: