vue 组件 – markdown


在编写自定义组件库时，如果有readme的使用说明将会有更好的用户体验。Vue项目中展示markdown文件有几种方式

方式一

markdown-loader将markdown文件加载为html文件，然后由html-loader负责加载该html文件
markdown-it-vue 是markdown-it的扩展，用于vue中展示markdown

  1. 安装依赖
1
$ npm i markdown-loader  html-loader  markdown-it-vue
  1. 修改webpack配置
    vue clie3 配置如下
1
2
3
4
5
6
7
8
9
10
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('md')
      .test(/.md$/)
      .use('markdown-loader')
      .loader('markdown-loader')
      .loader('html-loader')
  }
}
  1. 展示
    在vue文件中加载并展示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <div>
    <markdown-it-vue :content="content"/>
  </div>
</template>

<script>
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'
import content from '@lib/Button/README.md'

export default {
  components: {
    MarkdownItVue
  },
  data () {
    return {
      content
    }
  }
}
</script>

在markdown中输入# Button使用说明，展示效果如下

image.png

组件说明

markdown-it-vue： 用户展示markdown格式的内容。 内置大量插件和样式，使转换后的内容更加丰富

markdown-it-vue 是一个丰富的 markdown Vue 组件，markdown-it-vue 使用 markdown-it 作为 Markdown 数据解析引擎，整合多种 markdown-it 插件，并内置了一些自己的功能性插件，支持 GFM TOC、GFM style、emoji等通用特性，还支持 mermaid charts、Echarts、flowchart.js 等多种图表，支持 AsciiMath、Latex 等数学公式渲染，支持 errro | warning | info 个性化提示。

项目地址： https://github.com/ravenq/markdown-it-vue

在线示例： http://www.aqcoder.com/markdown

参考文章： https://www.jianshu.com/p/285b53e78ed9

方法二

vue-loader将markdown文件以vue格式加载， vue-markdown-loader转换markdown格式。markdown文件将被转换为vue组件

  1. 安装依赖
1
$ npm install vue-loader vue-markdown-loader
  1. 修改webpack配置
    vue clie3配置如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('md')
      .test(/.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
        raw: true
      })|
}
  1. 展示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div>
    <markdown></markdown>
  </div>
</template>

<script>
import markdown from '@lib/Button/README.md'
export default {
  components: {
    markdown
  }
}
</script>

组件说明

vue-markdown-loader：将markdown加载为Vue组件。无内置样式，使用浏览器默认样式或用户自定义

项目地址：https://github.com/QingWei-Li/vue-markdown-loader

在线示例：https://glitch.com/edit/#!/vue-markdown

参考文章： https://segmentfault.com/a/1190000019412548