1. vue-markdown-doc

vue-markdown-doc

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