vue3 引入markDown

关于vue3 引入markDown

因为vue3暂时不支持*mavon-editor,所以推荐使用v-md-editor：

install

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

# use yarn
yarn add @kangc/v-md-editor

在main.js或者新建markDown.js引入v-md-editor

import VueMarkdownEditor from '@kangc/v-md-editor';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
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);

export default (app) => {
    app.use(VueMarkdownEditor);
    app.use(VMdPreview);
}

然后就可以在任意vue页面中实现：

<template>
  <v-md-editor v-model="text" height="800px" ></v-md-editor>
</template>
<script>
export default {
  name: "markDown",
  methods:{
  },
  data() {
    return {
      text: '',
    };
  },
};
</script>
<style scoped>
</style>

参考网址：https://ckang1229.gitee.io/vue-markdown-editor/zh/examples/preview-dem