安装markdown-it

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

在main.js中全局注册

import { createApp } from 'vue'import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';VueMarkdownEditor.use(vuepressTheme, {});const app = createApp(App)app.use(VueMarkdownEditor)
app.mount('#app')

使用markdown

<template><div class="visualBox"><v-md-editor v-model="text" height="400px"></v-md-editor><div v-html="html"></div></div>
</template><script setup>
import {ref, watch} from 'vue';
import MarkdownIt from 'markdown-it';const text = ref("");
const html = ref("");watch(text,(newValue, oldValue) => {const md = new MarkdownIt();html.value = md.render(newValue);console.log("新值：" + newValue);},{immediate: true,deep: false}
)</script><style scoped></style>