小白都会使用的jsDoc-vue

小白都会使用的jsDoc-vue

第一步 安装依赖

这里有三个依赖

• minami
• jsdoc
• vue-template-complier

安装依赖

npm install --save-dev jsdoc

npm install --save-dev minami

npm install --save-dev vue-template-complier 

使用yarm的话把 npm install 换成 yarn add

第二步

配置
在前端vue项目根目录创建
.jsdoc.config.json注意前面有 个 点“.”
在
“include”: [

  "./src/components",
  "./src/view"
],

这个里面改成你的页面所在的文件夹
配置如下

{
  "tags": {
    "allowUnknownTags": true,

    "dictionaries": [
      "jsdoc"
    ]
  },

  "recurseDepth": 10,
  "source": {
    "include": [

      "./src/components",
      "./src/view"
    ],
    "includePattern": ".+\\.(vue)$",
    "excludePattern": "(^|\\/|\\\\)_"
  },

  "plugins": [

    "./jsdoc-vue"
  ],
  "templates": {
    "cleverLinks": false,
    "monospaceLinks": true,
    "useLongnameInNav": false,
    "showInheritedInNav": true
  },
  "opts": {

    "destination": "./static/doc",
    "encoding": "utf8",
    "private": true,
    "recurse": true,
    "template": "./node_modules/minami"
  }
}

创建 jsdoc-vue.js
内容如下

var compiler = require('vue-template-compiler');

exports.handlers = {
  // 利用 vue-template-compiler 编译 vue 模板
  beforeParse: function (e) {
    if (/\.vue$/.test(e.filename)) {
      var output = compiler.parseComponent(e.source);

      e.source = output.script ? output.script.content : '';
    }
  }
};

然后在你的pagejson里面添加一句

  "doc": "jsdoc -r -c .jsdoc.conf.json"

一切准备好之后就可以 点击那个三角形运行了
生成的文档在static下的doc里面