使用vue3 + ts + vite + v-md-editor 在前端页面预览markdown文件

1.效果预览

效果预览

2. 依赖包安装

yarn add @kangc/v-md-editor@next

v-md-editor中文官网：https://code-farmer-i.github.io/vue-markdown-editor/zh/

v-md-editor分为4种组件：

轻量版编辑器
进阶版编辑器
预览组件
html预览组件

对UI组件库页面，我只需要展示markdown解析出的html页面即可，所以使用的组件应该是预览组件。

3.在main.ts中导入VMdPreview预览组件

// 引入v-md-editor组件
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import Prism from "prismjs";VMdPreview.use(vuepressTheme, {Prism,
});const app = createApp(App)
app.use(VMdPreview)
app.use(router)  // 如果不使用vue-router可以注释掉
app.mount('#app')

4.在页面中使用 ?raw 后缀调用md文件中内容，在页面中加载

vite中引入静态资源如md等文件，需要在末尾加上 ?raw 这样引入进来的就是markdown文件中的内容了

<template><v-md-preview :text="markdownTxt"></v-md-preview>
</template><script setup lang="ts">import markdownTxt from '@/assets/mdDemo/testDemo.md?raw'import { ref, reactive, onMounted, useAttrs } from "vue";import { useRouter } from "vue-router";let props = defineProps({markdownTxt: String}) 
</script>