vue-markdown-doc

vue的markdown组件，可渲染markdown文件

安装

NPM

$ npm install --save vue-markdown-doc

Yarn

$ yarn add vue-markdown-doc

示例代码

<template>
  <div id="app">
      <MarkdownDoc
              :images="images"
              :mdRaw="mdRaw"
              :prevPage="{
                  title: 'SmartLinkTree 树',
                  url: '/docs/components/smart-link-tree'
              }"
              :nextPage="{
                  title: 'smartLinkInput 输入框',
                  url: '/docs/components/smart-link-input'
              }"
      />
  </div>
</template>

<script>
import "vue-markdown-doc/lib/index.css";
import MarkdownDoc from "vue-markdown-doc";

export default {
  name: 'FormDoc',
  components: {
      MarkdownDoc
  },
  data() {
    return {
      mdRaw: require('./component.md').default,
      images: {
          'todo-ui-form.png': require('./images/todo-ui-form.png')
      }
    }
  }
}
</script>

raw-loader

获取.md文件流需要使用raw-loader，配置参考官方文档

使用vue-cli的raw-loader配置

配置vue.config.js

function resolve(dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    ...,
    chainWebpack: config => {
        config.module
            .rule('raw-loader')
            .test(/\.md$/)
            .use('raw-loader')
            .loader('raw-loader')
            .end()
    }
}

VueMarkdownDoc props

| 参数 | 类型 | 说明 | 默认值 | |:-----|:----|:----|:-------| | mdRaw | String | markdown字符串 | - | | images | Object | 配置markdown中使用的图片，对于上例，在markdown中使用图片的格式为：{{"image": "todo-ui-form.png","width":1000,"height":530}} | - | | prevPage | Object | 格式：{title: String, url: String}，配置上一个模块的跳转 | - | | nextPage | Object | 格式：{title: String, url: String}，配置下一个模块的跳转 | - | | navFix | Boolean | 目录栏固定在顶端 | true | | scrollElementParent | Object | 页面滚动事件挂载的dom元素 | window |