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语法糖以及怎么去使用。