vitepress-for-component


> VFC Fork 自VitePress，针对组件开发场景做了一些功能增强和默认样式修改。

> 可以理解为是一个在 VitePress 的基础上向 dumi 靠拢的工具。

详细文档.

快速开始

- 使用脚手架create-vlib

``
yarn create vlib
`

- 不使用脚手架

像 vitepress 一样使用即可。

示例站点

- ahooks-vue

Features

$3

我们可以在.md文件中这样来引入demo。

`md
language="vue"
title="Demo演示"
desc="这是一个Demo渲染示例">

`

渲染效果如下：




alt="demo-example"
title="demo-example"
style="border: 1px solid rgba(0,0,0, 0.08); border-radius: 2px;" />




$3

在组件编写的场景中，我们觉得 dumi 的文件结构更合适。

#### 示例：

假设我们有这样一个组件库。

VitePress文件结构如下。

`
docs
├─ index.md
├─ loading
│ └─ index.md
├─ zh
│ ├─ index.md
│ └─ loading
│ └─ index.md
src
├── loading
│ ├── demo
│ │ └── demo.vue
│ └── loading.vue
└── ...
`

vitepress-for-componnet文件结构如下。

`
docs
├── index.en-US.md
├── index.zh-CN.md
src
├── loading
│ ├── demo
│ │ └── demo.vue
│ ├── index.en-US.md
│ ├── index.zh-CN.md
│ └── loading.vue
└── ...

`

我们觉得dumi的组织结构有如下好处：

- demo.vue 和 loading.md 都放在 src 下面，源码和文档联系感更强。
- 用后缀.zh-CN`来区分 locale，更加有对比度。

$3

如图：

alt="example"
title="example"
style="border: 1px solid rgba(0,0,0, 0.08); border-radius: 2px;" />