一、前言

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

二、实现过程

首先

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

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

说明: markdown-loaderhtml-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的博客,是这样的
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200713181913581.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwMjU3Mg==,size_16,color_FFFFFF,t_70

三、总结

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

Logo

前往低代码交流专区

更多推荐