vue-styleguidist 3.0 中的新功能

Vue Styleguidist 是一个 Node 包,可自动为您的 Vue 组件创建文档。 Alex Jover Morales去年在 Alligator.io上展示了它。

是时候做一个新鲜的。

由 VuePress提供的新文档网站将帮助您开始记录。

Vue-styleguidist 3带来了显著的性能提升,vue-docgen-api进行了整个重写,Vue-styleguidist现在运行速度从20倍到2000倍。

让我们看看哪些特征发生了变化。

在 Flow 和 TypeScript 中检测类型

在 3.0 之前,文档制作者必须在 JSDoc 中指定返回的类型和参数类型。

 1// vue-styleguidist 2.0
 2export default {
 3  methods: {
 4    /**
 5      * Get the item selected in the category found
 6      * @param {Number} category
 7      * @returns {Item}
 8      */
 9    getSelectedItem(category: number): Item {
10        return this.items[category]
11    }
12  }
13}
14
15// vue-styleguidist 3.0
16export default {
17  methods: {
18    /**
19      * Get the item selected in the category found
20      */
21    getSelectedItem(category: number): Item {
22        return this.items[category]
23    }
24  }
25}

JSX Render 中的插槽功能

在某些情况下,在JSX渲染函数中编写模板更容易。为什么要牺牲自动化文档?在 3.0 中,您可以直接在渲染函数中记录插槽。

 1export default {
 2  render() {
 3    return (
 4      <div>
 5        {/** @slot describe the slot here */}
 6        <slot name="myMain" />
 7      </div>
 8    )
 9  }
10}

这也适用于非JSX渲染函数。

类风格组件

Vue.js 3.0 的未来是类型组件,请参阅此请求评论。Vue Styleguidist 不会落后,Vue styleguidist 3.0 现在支持 Vue 类组件:

1/**
2 * Describe your components here
3 */
4export default class MyComponent extends Vue {
5  /**
6   * An example of a property typed through the annotation
7   */
8  @Prop() myProp: number = 0;
9}

再也不会出现微软旗帜

在版本2中,纪录片制作者必须用标签标记每个混合物@mixin。否则,Viewer-styleguidist就缺少了混合物中的附加文件。

 1// vue-styleguidist 2.0
 2/**
 3 * @mixin
 4 */
 5export default {
 6  props:{
 7    size: Number
 8  },
 9  computed:{
10    sizeClass(){
11      return `size-${this.size}`;
12    }
13  }
14}
15
16// vue-styleguidist 3.0
17export default {
18  props:{
19    size: Number
20  },
21  computed:{
22    sizeClass(){
23      return `size-${this.size}`;
24    }
25  }
26}

Prop从功能模板中提取

Vue 2.5 引入了功能模板,用于渲染功能组件的模板。props 的定义与经典组件有所不同。Styleguidist 3.0 现在也理解并记录了这个语法。

1<template functional>
2  <button :style="`width: ${props.size}px;`">
3    {{props.name}}
4  </button>
5</template>

事件自动检测

在v2.0中,纪录片必须指向每个发布的事件,如果他们忘记了一件事,它永远不会出现在文档中。在 3.0 中,轻松休息,事件被检测和默认地立即记录。

 1// vue-styleguidist 2.0
 2export default {
 3  //...
 4  methods:{
 5    /**
 6     * When submission is sucessful
 7     * @event success
 8     */
 9    submit(){
10      this.$emit('success')
11    }
12  }
13}
14
15// vue-styleguidist 3.0
16export default {
17  //...
18  methods:{
19    submit(){
20      /**
21        * When submission is sucessful
22        */
23      this.$emit('success')
24    }
25  }
26}

请注意,在 vue-styleguidist 3.0 中,事件和描述必须是连续的行,如JSDoc。

外部脚本和模板

最后, vue-styleguidist 3.8 带来了与导入的模板和脚本的兼容性. 文档制作者现在可以使用单个文件组件(SFC)写成如下:

1<template src="./template.html"/>
2<script src='./script.ts'/>

文档脚本和模板就像在.vue 文件一样。Vue-styleguidist 将解析和显示 JSDoc。

包装上

我们希望你喜欢这个新版本,我们付出了很多努力,确保它能满足尽可能多的需求。

如果您有任何问题,建议,问题或评论,请在 Vue Styleguidist monorepo上发布问题。

很快见。