工具组件_Vue3 组件库文档工具 [vite-plugin-vuedoc]

这半年来感情受挫使我这个 30 岁的老男人不得一改以往懒散的作风，开始代码为伴，借码消愁

随着 vue3 的发布，越来越多的前端老师开始撸起了自己的组件库，与此同时 yyx 老师也给我们带来了更加现代化的打包工具 vite , 体验过的都会对那种丝滑流连忘返

于是众多老师们便开始尝试着使用 vite 来打包组件库的文档站

大部分的组件库文档都是基于 markdown 来编写，而同时它们都有代码预览的功能，下面展示几个案例， 今天要给老师们推荐的就是这个 vite 插件便是用来做这件事的，用来将 markdown 文件转成 vue 组件的并展示一个漂亮的 demo.

github: vite-plugin-vuedoc

使用方式

• 现在你的 vite 项目中安装并使用 vite-plugin-vuedoc 插件 yarn add vite-plugin-vuedoc

// vite.config.ts
import vitePluginVuedoc from 'vite-plugin-vuedoc'

const config: UserConfig = {
  plugins: [vitePluginVuedoc()],
}

export default config

• 引入 vite-plugin-vuedoc 的基础样式

import 'vite-plugin-vuedoc/style.css'

• 接下来就可以开始写 markdown 文档了

demo 标签代表该代码块是需要预览的

• 引入 markdown 组件

• 跑起来

• 当你的预览代码块较大的时候 也可以通过使用 src 属性从其他文件引入

展示效果如下：

• 如果默认的预览样式不够漂亮不符合您的使用场景，插件提供了自定义预览组件的功能，你可以通过使用 previewComponent 属性指定自己的预览组件。 这时候 demo 和 code 会分别以 slot#defalut 和 slot#code 传递给自定义组件，您可以自由的发挥。

[vite-plugin-vuedoc] 效果预览

组件库文档站示例

elenext.vercel.app