在編寫(xiě)自定義組件庫(kù)時(shí)，如果有readme的使用說(shuō)明將會(huì)有更好的用戶體驗(yàn)叮雳。Vue項(xiàng)目中展示markdown文件有幾種方式

方式一

markdown-loader將markdown文件加載為html文件，然后由html-loader負(fù)責(zé)加載該html文件
markdown-it-vue 是markdown-it的擴(kuò)展前方，用于vue中展示markdown

1. 安裝依賴

$ npm i markdown-loader  html-loader  markdown-it-vue

2. 修改webpack配置
   vue clie3 配置如下

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

3. 展示
   在vue文件中加載并展示

<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使用說(shuō)明趋急，展示效果如下

image.png

組件說(shuō)明

markdown-it-vue： 用戶展示markdown格式的內(nèi)容。 內(nèi)置大量插件和樣式饵撑，使轉(zhuǎn)換后的內(nèi)容更加豐富

markdown-it-vue 是一個(gè)豐富的 markdown Vue 組件剑梳，markdown-it-vue 使用 markdown-it 作為 Markdown 數(shù)據(jù)解析引擎，整合多種 markdown-it 插件滑潘，并內(nèi)置了一些自己的功能性插件阻荒，支持 GFM TOC、GFM style众羡、emoji等通用特性侨赡，還支持 mermaid charts、Echarts、flowchart.js 等多種圖表羊壹，支持 AsciiMath蓖宦、Latex 等數(shù)學(xué)公式渲染，支持 errro | warning | info 個(gè)性化提示油猫。

項(xiàng)目地址： https://github.com/ravenq/markdown-it-vue

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

參考文章： http://www.reibang.com/p/285b53e78ed9

方法二

vue-loader將markdown文件以vue格式加載稠茂， vue-markdown-loader轉(zhuǎn)換markdown格式。markdown文件將被轉(zhuǎn)換為vue組件

1. 安裝依賴

$ npm install vue-loader vue-markdown-loader

2. 修改webpack配置
   vue clie3配置如下

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
      })|
}

3. 展示

<template>
  <div>
    <markdown></markdown>
  </div>
</template>

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

組件說(shuō)明

vue-markdown-loader：將markdown加載為Vue組件情妖。無(wú)內(nèi)置樣式睬关，使用瀏覽器默認(rèn)樣式或用戶自定義

項(xiàng)目地址：https://github.com/QingWei-Li/vue-markdown-loader

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

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