先安装插件,可以用来编辑md文件,和展示文件:

 npm install mavon-editor -S

在全局中引用

// 引入makrdown插件
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

然后,你发现导入的md文件报错了,需要在base文件里添加loader;


      {
        test: /\.md$/,
        use: [
          {
            loader: "html-loader"
          },
          {
            loader: "markdown-loader",
            options: {
            }
          }
        ]

再下载插件,不然解析md文件会报错

$ npm i markdown-loader html-loader --save-dev

最后就可以展示md文件了:

<template>
<div class="mavonEditor">
  <mavon-editor class="md" v-html="handbook" :subfield="false" :toolbarsFlag="false" :boxShadow="false" :ishljs="true" />
</div>
</template>
<script>
import GUID from '../guid/guid.md';
export default {
  data() {
    return {
      markdownOption: {
        bold: true, // 粗体
      },
      handbook: GUID
    };
  }
};
</script>