vue3 预览markdown

关注

原创最新推荐文章于 2026-04-08 10:15:05 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

Vue3项目实战：v-md-editor实现Markdown编辑器与预览组件完整配置指南本文提供了一份详尽的Vue3项目集成v-md-editor Markdown编辑器的实战指南。内容涵盖从环境搭建、核心组件引入、工具栏与图片上传等深度功能配置，到高级主题定制、性能优化及常见问题排查，旨在帮助开发者快速构建功能强大且体验流畅的Markdown编辑与预览组件。阅读详情

一、安装支持 vue3 的版本

使用 npm

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

使用 yarn

yarn add @kangc/v-md-editor@next

二、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';

import Prism from 'prismjs';

VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});

const app = createApp(/*...*/);

app.use(VueMarkdownEditor);

三、使用

<template>
 <v-md-preview :text="currentItem.mkContent"></v-md-preview>
</template>
<script>
  setup() {
    const currentItem = reactive({
      mkContent: '### 使用 markdown'
    })
  }
</script>