Vue API 文档自动生成
markdown 写一个 API 组件,传入 src 属性。
md
<API src="../../../vitepress-demo-block/src/Demo.vue" lang="zh"></API>
<API src="../../../vitepress-demo-block/src/Demo.vue" lang="zh"></API>
生成的 API 文档:
<demo> Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| code (必填) | 源码字符串(需经过encodeURIComponent处理) | string | - |
| highlighted-code (必填) | string | - | |
| title | string | - | |
| desc | string | - | |
| lang | string | 'vue' | |
| default-expand | boolean | false | |
| import-map | Record | () => ({}) |
<demo> Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| default | - |
Demo.vue Props 内容如下
ts
const props = withDefaults(
defineProps<{
/**
* @zh 源码字符串(需经过encodeURIComponent处理)
*/
code: string;
highlightedCode: string;
title?: string;
desc?: string;
lang?: string;
defaultExpand?: boolean;
importMap?: Record<string, string>;
}>(),
{
lang: 'vue',
defaultExpand: false,
importMap: () => ({}),
},
);
const props = withDefaults(
defineProps<{
/**
* @zh 源码字符串(需经过encodeURIComponent处理)
*/
code: string;
highlightedCode: string;
title?: string;
desc?: string;
lang?: string;
defaultExpand?: boolean;
importMap?: Record<string, string>;
}>(),
{
lang: 'vue',
defaultExpand: false,
importMap: () => ({}),
},
);