1.安装依赖

npm i @kangc/v-md-editor -S

2.在main.js文件中引用注册组件

import { createApp } from 'vue';
// 预览组件以及样式
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
import hljs from 'highlight.js';
VMdPreview.use(githubTheme, {
  Hljs: hljs,
});

const app = createApp(App)
app.use(VMdPreview)

3.在项目目录public下创建一个名为markdown的文件夹存放写好的markdown文件

image.png

4.在前端中引用markdown.md文件，并使用预览markdown组件

<!-- markdomn文件 -->
<el-drawer
    :title="$t('message.steps')"
    class="markdownDrawer"
    v-model="drawerstep"
    :with-header="false"
    :show-close="false"
    :size="650"
>
    <markdomnView :markdownTxt="markdownTxt"></markdomnView>
</el-drawer>

<script setup>
import markdomnView from '@/components/markdomnView/index.vue'
import markdownTxt from '/public/markdown/hostAsset.md?raw'
</script>

引用.md文件需要后面加?raw否则文件内容展示不出来

5.最终效果

markdown.md文件内容

image.png

markdown在网页中的效果

image.png