一个 vue 组件库开发工具,类似dumi,基于 VitePress。
English Introduction | 中文介绍
<demo src="../demo.vue" title="Demo block" desc="use demo"></demo>也可以这样使用(去掉反斜杠)
\```vue:demo
<script lang="ts" setup>
const number = 1;
</script>
<template>
<span>The number is {{number}}</span>
</template>
\```在 markdown 里面使用<API>组件,只需要传入文件路径,自动生成文档。
基于
vue-docgen-api项目, 参考了很多arco-design-vue的代码。
<API src="./demo.vue" lang="zh"></API>对于 ts 文件,暂时只支持生成 ts 文件里面 interface 文档,而且必须要有 jsDoc 格式的注释。
<API src="./demo.ts" lang="zh"></API>一般来说,我们使用 VitePress 会单独建一个docs目录,把文档集中放在此目录下。但是Demo文件放在docs目录下面会让组件源码和demo.vue隔得太远,放到一起更为合理。
所以ruabick能把 markdown 写在src目录下 main,通过 formatter 指定映射路径,把改文件映射到docs目录下面。
// src/dir/demo-introduction.md
---
mapping:
path: /demo
---提供了脚手架创建新项目。实际上也可以基于 VirePress 安装
ruabick/*的一些插件来使用,但是较为繁琐,不推荐。
pnpm create @ruabick/vlib
ruabick是一个 monorepo 库,包含的一些插件也可以单独使用。