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>
通过以上步骤，就可以将markdown文件转换成页面中可显示的html了
