vue项目支持markdown文档

完成示例图

开发步骤

1. 安装依赖

npm install vue-markdown

"vue-markdown": "^2.2.4"

2. 文档

//1-1.md

# 开发指南

<img src="1.png" />

3. 引用组件 & 替换图片源

<template>
  <div>
    <!-- 左侧目录 -->
    <el-tree v-if="cnk" :data="treeData" :current-node-key="cnk" node-key="value" />

    <!-- 右侧文档 -->
    <VueMarkdown v-if="mdData" :source="mdData" v-highlight />
  </div>
</template>

<script>
  import VueMarkdown from 'vue-markdown';
  import md11 from './1-1.md'; //引入文档

  export default {
    name: 'document',
    components: {
      VueMarkdown
    },
    data() {
      return {
        mdData: null,
        //目录
        treeData: [
          {value: '1-1', label: '开发指南', md: md11}
        ]
      }
    },

    created() {
      this.mdData = md11;
      this.cnk = '1-1'
      this.formatImg(this.mdData);
    },
    methods: {
      //替换文档中的本地图片地址
      formatImg(markdownData) {
        this.mdData = null;
        setTimeout(() => {
          this.mdData = markdownData && markdownData.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
            let src = require(`/static/images/markdown/${capture}`)
            return `<span style="display: flex; align-items: center; justify-content: center;"><img src="${src}" /></span>`
          });
        }, 0)
      }
    }
  }
</script>