vue集成markdown组件，直接查看.md文件

使用场景：项目中有帮助中心，帮助中心种是各种相关功能介绍的内容。实现结果如下所示：

简单所示

1、安装插件   yarn add markdown-loader vue-markdown  github-markdown-css highlight.js

markdown-loader :目的是能够读取.md 文件，类似less-loader、sass-loader，

                                需要注意的是版本问题：@8.0.0需要webpack5 、@7.0.0需要webpack2+，在这趟了好多坑

vue-markdown :目的是将.md 文件包装成一个类似 vue的单文件组件

github-markdown-css ：样式文件，比如表格样式、引用等等

highlight.js： 代码高亮的样式

2、封装Markdown 组件 component/Markdown/index.vue

    1）template:  <div class="markdown-body"><VueMarkdown ref="mdRef" :source="markedHTML" /></div>

    2）引入并注册vue-markdown组件 ：

            import VueMarkdown from 'vue-markdown'   

            components: { VueMarkdown }

    3）props： source  是一个请求文件的地址

   4） initWithMd： 请求数据(这里需要自己写axios请求，在这就省略了哈)，得到md文件内容  this.markedHTML = res.data

    5）样式文件的引入：import 'github-markdown-css'

                                        import Hljs from 'highlight.js'

                                        import 'highlight.js/styles/atom-one-dark.css'

    6）渲染样式到页面

        this.$nextTick(_ => {

          const blocks = this.$refs.mdRef.$el.querySelectorAll('pre code')

          blocks.forEach((block) => {

            Hljs.highlightBlock(block)

          })

        })

3、使用集成的markdown 组件

    1）引入并注册组件

        import MD from '@/component/MarkDown/index.vue'

        components: { MD }

    2）Template

        <MD :source="./markdown/demo.md" />

4、总结

    md 文件一般是需要放在public文件夹中的，因为这个文件的变动或许会很频繁，放在src中就得重新打包，这操作不太爽。

    因为趟了好多坑，过程太曲折，所以记录下来了。