vue3中使用markdown

vue3安装markdown

# 使用 npm
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';

import Prism from 'prismjs';

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

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

app.use(VueMarkdownEditor);

在自己注册的组件内使用

<template>
  <v-md-editor v-model="article.text" height="400px"></v-md-editor>
</template>

<script setup>
import { reactive } from 'vue'
const article = reactive({
	text:''
})
</script>

下图为使用markdown成功后的截图

在这里使用了vue3的语法糖，下篇博客会给大家简单说一下什么是setup语法糖以及怎么去使用。