这半年来感情受挫使我这个 30 岁的老男人不得一改以往懒散的作风，开始代码为伴，借码消愁 👿
随着 vue3 的发布，越来越多的前端老师开始撸起了自己的组件库，与此同时 yyx 老师也给我们带来了更加现代化的打包工具 vite , 体验过的都会对那种丝滑流连忘返
于是众多老师们便开始尝试着使用 vite 来打包组件库的文档站
大部分的组件库文档都是基于 markdown 来编写，而同时它们都有代码预览的功能，下面展示几个案例， 今天要给老师们推荐的就是这个 vite 插件便是用来做这件事的，用来将markdown 文件转成 vue 组件的并展示一个漂亮的 demo.
使用方式
- 现在你的 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] 效果预览
