博客

1、下载依赖

npm i @kangc/v-md-editor

2、入口文件引入

import VMdPreview from '@kangc/v-md-editor/lib/preview';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
VMdPreview.use(vuepressTheme);
Vue.use(VMdPreview);

3、存放需要的md文档

4、使用

<template>
  <div id="app">
    <v-md-preview :text="md"></v-md-preview>
  </div>
</template>
<script>
// 引入axios, 也可以封装
import axios from 'axios';
// md文档存放路径  ${process.env.BASE_URL}代表'public/'
const CONTENT_URL = `${process.env.BASE_URL}agreement/DigitalCertAgreement.md`;
export default {
  created() {
    this.md = '';
    this.getAgreementContent();
  },
  methods: {
    getAgreementContent() {
      // 获取内容
      axios
      .get(CONTENT_URL, {})
      .then((res) => {
        console.log(res)
        this.md = res.data;
      })
      .catch((err) => {
        return Promise.reject(err);
      });
    }
  }
};
</script>

然后md文档就可以将显示在页面上了