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了