如何在Vue-Styleguidist中展示Class Mixin的属性与方法？

我之前也碰到过一模一样的问题，结合你给出的版本信息，下面几个方法应该能帮你解决：

方法一：配置vue-docgen-api识别类式Mixin #

Vue-Styleguidist依赖vue-docgen-api解析组件文档，默认情况下它没法正确识别vue-class-component这种基于类继承的Mixin写法。你可以通过自定义配置让它支持：

1. 在项目根目录新建vue-docgen.config.js文件，写入以下配置：

module.exports = {
  parserOptions: {
    vue: {
      compiler: require('vue-template-compiler'),
      componentOptions: {
        classComponent: {
          classComponent: require('vue-class-component'),
          parseMixins: true
        }
      }
    }
  }
};

2. 重启Vue-Styleguidist服务，这时候应该就能看到Mixin里的mixinValue和mixinMethod出现在属性/方法表格里了。

方法二：手动用JSDoc关联Mixin文档 #

如果方法一没生效，你可以通过JSDoc的@mixes标签手动关联Mixin，强制Styleguidist识别Mixin的内容：

修改你的组件代码如下：

import Vue from 'vue';
import Component, { mixins } from 'vue-class-component';

/**
 * MyMixin的功能说明
 */
@Component
class MyMixin extends Vue {
 /*
 * Mixin prop documentation text
 */
 mixinValue:boolean = true;
 /*
 * Mixin method documentation text
 */
 mixinMethod():string {
  return this.mixinValue ? 'some string' : '';
 }
}

/**
 * MyComp的组件说明
 * @mixes MyMixin
 */
@Component
export class MyComp extends mixins(MyMixin) {
 /*
 * Component prop documentation text
 */
 componentValue:string = 'some value';
 /*
 * Component method documentation text
 */
 componentMethod(): string {
  return this.mixinMethod();
 }
}

添加@mixes MyMixin标签后，Styleguidist会自动将Mixin的文档合并到组件文档中。

方法三：升级相关依赖（可选） #

你当前使用的vue-cli-plugin-styleguidist@3.11.4版本比较旧，新版本的插件已经修复了不少类式组件Mixin的解析问题。如果前面的方法都不凑效，可以尝试升级依赖：

npm update vue-cli-plugin-styleguidist vue-docgen-api

注意升级前最好备份项目，避免出现版本兼容问题。

内容的提问来源于stack exchange，提问作者Ishkar