Vue解析 markdown 文件

一、前言

如题，如何在Vue中解析markDown文件然后展示在网页上呢？一开始我也不太清楚，就拿着我的冲浪板在网络海洋里冲浪，但是没想到是一片珊瑚礁海域，让我心力憔悴，失去了学习的热情。
在我的不依不挠之下，终于从各种抄来抄去，三言两语的碎片博客中找到了解决方法。
注意，是解析文件，而不是文本，解析文本的其实网上已经有很多博客了，但是解析文件的其实还是零零碎碎，不太准确。
如果你也在珊瑚礁海域绝望之中，希望这篇博客可以帮到你。

二、实现过程

首先

我们需要使用npm引入三个包，为啥用npm而不用cnpm呢？cnpm不是速度快吗？在这里，我个人还是建议用npm，三个包的体积并不是很大，下载时间两者相差其实不大，而npm会更加的准确。

npm i markdown-loader html-loader marked --save

说明: markdown-loader、html-loader是为了让vue能够解析md格式的文件，读取出来，然后使用marked将读取出来的数据转换成html格式渲染到页面上。

然后

就在需要解析数据的页面的js里面引入marked， 这一步就很简单了，直接看代码

<script>
  // 引用marked
  const marked = require('marked')
</script>

接下来

准备引入 *.md 文件，但是引入之前还需要做一个规则配置，如果没有配置的话会报无法解析“#”的错误。
配置：找到webpack.base.conf.js，将下面代码复制到model下的rules里面去，注意别漏了逗号。

{
    
    
         test: /\.md$/,
         use: [
            {
    
     loader: 'html-loader' },
            {
    
     loader: 'markdown-loader', options: {
    
    } }
         ]
      },

然后是这样的

配置好后就可以引入md文件了，注意文件路径别错了。

这时，md格式的数据就被解析成了html格式的数据，我们只需要将html格式的数据渲染上去就行了。

最后

实现的效果是这样的（可能你的页面有些不一样因为没有滚动条或者样式）
用于测试的md文件我是直接拷贝CSDN的博客，是这样的

三、总结

整体来说，实现的效果还是很不错的，目的达到了，当然了，还有其他方法可以实现这个，但是我觉得我这个是最方便的方法之一了。
还有就是，CSDN上的markdown语法并不是原生的markDown语法，直接复制粘贴，最终解析出来的排版可能会有所差别。
tips:水平有限，大神勿喷