1.使用插件 v-md-editor ,下载
npm i @kangc/v-md-editor@next -S
官网地址可查看文档,介绍 | v-md-editor
2.第二步,在main.ts引入
// 引入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'
VMdPreview.use(vuepressTheme)
app.use(VMdPreview)
3.在需要引入的页面引入组件
<template>
<v-md-preview :text="markdownTxt" />
</template>
<script setup>
// const markdownTxt = ref(`# 序
// 开始预览组件的使用
// * 看
// * 写
// * 运行`)
</script>
然后页面如图
4.如果需要引入.md文件,引入即可
<template>
<v-md-preview :text="markdownTxt" />
</template>
<script setup>
import str from './version.md?raw
const markdownTxt = ref('')
onMounted(() => {
markdownTxt.value = str
})
</script>
引入.md文件需要在后面加?raw,?raw
后缀声明作为字符串引入
这样就可以啦