vite+vue3项目中实现markdown编写UI组件文档并且预览

JacobChung2024-04-16 19:15

目前我们看到的UI库以及文档都是独立的静态站点，然而有些需求是在现有的项目中实现一个UI组件的文档，实现工作协调的方便性质，防止组员们的沟通上失误导致重复造轮子。

这里我选用了vite-plugin-doc-preview的vite插件，该插件是利用了highlight.js、marked.js来实现markdown拓展的。这里我就不细说vite-plugin-doc-preview插件的实现逻辑了，感兴趣的可以去看插件的实现逻辑。

我们先看一下最终的效果图，如下图

第一步，我们先把依赖给安装进来到项目中，执行命令

css 复制代码

npm install vite-plugin-doc-preview --save-dev

由于我是使用npm管理的，如果大家使用其它的包管理工具，就根据项目管理工具方式安装。安装完毕之后，我们进行配置

第二步，配置vite.config.ts的文件

vite.config.ts 复制代码

import vitePluginDocPreview from 'vite-plugin-doc-preview';

vite.config.ts 复制代码

plugins: [
    vitePluginDocPreview()
]

vite.config.ts 复制代码

plugins: [
   vue({ include: [/\.vue$/, /\.md$/] })
]

main.ts 复制代码

import 'vite-plugin-doc-preview/style/style.css';

完成以上的配置，我们就可以开始利用markdown的方式编写我们的UI文档啦！

我们可以创建一个demo来试试看效果，创建一个docs.md的文件

注意这里的预览必须在vue preview 一对符号包含着内容才会渲染vue的组件出来，如果仅仅想显示code的时候去除vue preview就是指显示代码了。

由于我没有用到router，所以直接使用组件的方式使用。如果大家用到router的时候，可以通过import引入就可以了。

xml 复制代码

<template>
  <Docs></Docs>
</template>
<script setup lang="ts">
import Docs from '@docs/index.md';
</script>

最后就可以看到文章刚刚开始的效果了。