Vue解析 markdown 文件

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

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

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

<script>
// 引用marked
const marked = require(‘marked’)
</script>
1
2
3
4
接下来
准备引入 *.md 文件，但是引入之前还需要做一个规则配置，如果没有配置的话会报无法解析“#”的错误。
配置：找到webpack.base.conf.js，将下面代码复制到model下的rules里面去，注意别漏了逗号。

{
test: /\.md$/,
use: [
{ loader: ‘html-loader’ },
{ loader: ‘markdown-loader’, options: {} }
]
},
1
2
3
4
5
6
7
然后是这样的
在这里插入图片描述
配置好后就可以引入md文件了，注意文件路径别错了。
在这里插入图片描述
这时，md格式的数据就被解析成了html格式的数据，我们只需要将html格式的数据渲染上去就行了。
在这里插入图片描述

最后
实现的效果是这样的（可能你的页面有些不一样因为没有滚动条或者样式）