ruabick

一个 vue 组件库开发工具，类似dumi，基于 VitePress。

文档

<demo src="https://github.com/dewfall123/ruabick/raw/master/./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="https://github.com/dewfall123/ruabick/raw/master/demo.vue" lang="zh"></API>

对于 ts 文件，暂时只支持生成 ts 文件里面 interface 文档，而且必须要有 jsDoc 格式的注释。

<API src="https://github.com/dewfall123/ruabick/raw/master/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 库，包含的一些插件也可以单独使用。