您是否曾经失去对 Vue 应用程序组件的监督?

如果是这种情况,您绝对应该关心记录您的组件。那么这里的第一个想法是什么:在 wiki 中打开一个页面,然后写下每个组件的作用。然而,这可能不是最好的方法,因为人们往往会忘记更新文档(或者只是不想像我一样)。

那么为什么不直接从您的代码中自动生成一个漂亮的文档页面呢?但是怎么做?

不用担心! vuese 有你的支持。它可以为您的组件自动生成文档,并将其呈现为一个简洁的 html 页面。

vuese/vuese

🤗 vue 组件文档的一站式解决方案。原始组织:https://github.com/vuese

订阅者

vue组件文档一站式解决方案

该项目由我们的支持者支持

[](http://commitizen.github.io/cz-cli /)

文件

详细文档:vuese.org

概述

Vuese自动为您的vue组件生成文档,并提供多种生成组件文档的解决方案,满足您的不同需求。

@vuese/cli

@vuese/cli是一个使用非常简单的命令行工具。如果您想快速为您的vue组件构建文档站点,或者只想为您的vue组件生成markdown文档,那么此工具可能是一个不错的选择。详情请看:@vuese/cli

@vuese/解析器

@vuese/parser模块是vue组件的解析器,@vuese/cli内部通过@vuese/parser模块解析vue组件并提取我们想要的信息。您可以使用@vuese/parser模块提供的接口做任何更高级的事情。API文档请到@vuese/parser

在线体验

访问以下👇...

在 GitHub 上查看

您现在可以通过以下方式将其添加到您的 Vue 项目中:

npm install -g @vuese/cli 

进入全屏模式 退出全屏模式

然后运行 vuese 生成文档

vuese gen

进入全屏模式 退出全屏模式

就是这样,我发誓🙌🏻

---

现在让我们来看看它是如何工作的

假设我们有以下组件:

<template>
  <div>
    <!-- Form header -->
    <slot name="header">
      <!-- `<th>title</th>` -->
      <th>title</th>
    </slot>
  </div>
</template>

<script>
// This is a description of the component
export default {
  name: 'TestComponent',
  props: {
    // The name of the form, up to 8 characters
    name: {
      type: [String, Number],
      required: true,
      validator () {}
    }
  },
  methods: {
    // @vuese
    // Used to manually clear the form
    clear () {
      // Fire when the form is cleared
      // @arg The argument is a boolean value representing xxx
      this.$emit('onclear', true)
    }
  }
}
</script>

进入全屏模式 退出全屏模式

这导致了这个整洁的 html 页面:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--MOmFBAZ3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/ Mb6aTyP.png)

vuese 从插槽、道具、方法和事件以及组件本身直接从代码中检索数据和注释。如您所见,它甚至从name属性中提取类型和所需状态。

你可以在这里查看结果:https://berniwittmann.github.io/vuese-demo/index.html

我还创建了一个小型 repo,您可以在其中玩转注释并感受它是多么简单。

BerniWittmann/[vuese-demo

Vue 组件的 Vuese 文档生成的简短演示

使用 vuese 为 Vue 组件快速轻松地生成文档 - 演示

这个 repo 是工具vuese的简短演示,用于为 Vue.js 组件创建组件文档。

随附的博文可在dev.to上找到

结果

设置

安装依赖项

npm install

生成文档

通过运行生成文档

npm run docs

在 GitHub 上查看

因此,尽情享受创建组件文档的乐趣吧,一定要查看vuese.org了解更多信息。

感谢您的阅读,我很高兴收到一些反馈,因为这是我的第一篇博文💪🏻