# 安装
npm i -D vuepress-apidoc

# 生成api文档
vuepress-apidoc -c 配置文件路径

# 例如，自行在本地创建config文件
vuepress-apidoc -c ./config/config.js

# 或
vuepress-apidoc -c ./config/config.json

// docs/.vuepress/config.js
// 引入导出的sidebar配置config.js
const { getApiSidebarList } = require('../api/config')
let sidebarList = {
  // 这里可以写你其他的侧边栏导航
  // 例如
  // v1.x、v0.x
  // '/other/': [
  // {
  //   title: 'other',
  //   collapsable: false, // 可选的, 默认值是 true,
  //   children: ['/other/other.md']
  // }
  // v2.x
  // '/other/': [
  //   {
  //     text: 'other',
  //     children: [
  //       '/other/other.md'
  //     ]
  //   }
  // ]
}

// 将getApiSidebarList()返回的对象，覆盖到sidebarList
sidebarList = Object.assign({}, sidebarList, getApiSidebarList())

// vuepress配置
module.exports = {
  themeConfig: {
    sidebar: sidebarList
  }
}

const config = {
  src: ['../src'],
  rotuerName: 'api',
  dist: '../docs',
  defaultSiebarName: 'API',
  readme: {
    path: '../README.md',
    outputName: 'README.md',
    isOutputApiList: false
  },
  sidebarTree: [
    {
      title: '工具类',
      include: ['utils/**'],
      exclude: []
    }
  ],
  info: false,
  include: ['*.js'],
  exclude: ['node_modules'],
  vuepressVersion: 2,
  // jsdoc: {
  //   configure: ''
  // },
  // vue doc文档配置
  vueDoc: {
    // 输出配置，是否需要自动检测文件输出对应的 event、props、slot、method，默认都为true，如果不需要则设置对应的为false即可
    autoOutput: {
      title: true,
      // 是否输出props
      props: true,
      slot: true,
      method: true,
      event: true
    }
  }
}

module.exports = config

  /**
   * 订阅事件
   * @param {*} type 事件名
   * @param {*} scope 作用域
   * @param {*} callback 回调
   * @param {*} [params=[]] 回调参数
   * @memberof EventManager
   */
  on(type, scope, callback, params = []) {
    // 订阅的放到数组记录
    const listenerParams = { callback: callback, scope: scope, params: params, isOnce: false }
    this.addListener(type, listenerParams)
  }

<template>
  <div class="Button">
    <button class="button" @click.prevent="onClick" :style="{ color: color, fontSize: fontSize }">
      <!-- @slot 这里是slot的jsdoc
                @binding {object}  text text of the menu item
      -->
      <slot name="test" :text="fontSize"> </slot>

      <button @click="click">点击</button>
    </button>
  </div>
</template>

<script>
  /**
   * 这里是组件的描述
   */
  export default {
    name: 'Button',
    props: {
      /**
       * The color for the button.
       */
      color: {
        type: String,
        default: '#333'
      },
      /**
       * The size of the button 其他的东西ddd
       * @values small, normal, large,ls
       *
       */
      size: {
        type: String,
        default: 'normal'
      },
      /**
       * Gets called when the user clicks on the button
       * @ignore
       */
      onClick: {
        type: Function,
        default: (event) => {
          console.log('You have clicked me!', event.target)
        }
      }
    },
    computed: {
      fontSize() {
        let size
        switch (this.size) {
          case 'small':
            size = '10px'
            break
          case 'normal':
            size = '14px'
            break
          case 'large':
            size = '18px'
            break
        }
        return size
      }
    },
    methods: {
      /**
       * Sets the order2222
       * @public
       * @version 1.0.5
       * @since Version 1.0.1
       */
      click() {
        /**
         * 这里是events的jsdoc
         * @event click
         * @property {number} newVal new value set
         * @property {number} oldVal new value set
         * @params  {number} newVal
         */
        this.$emit('click', newVal, oldVal)
      }
    }
  }
</script>

<style scope>
  .checks {
    background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 25%), linear-gradient(-45deg, #f5f5f5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f5f5f5 75%), linear-gradient(-45deg, transparent 75%, #f5f5f5 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  }
</style>

<!-- 直接引入md文件 -->
<docs>
  <demo>./Button.md</demo>
</docs>

<!-- 像这样就可以了-->
<docs>
  <demo> 文件路径1 </demo>
  <demo> 文件路径2 </demo>
</docs>