轻松记录您
灵感和创意

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格式的数据渲染上去就行了。
在这里插入图片描述

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

未经允许不得转载:坚果之云 Markdown » Vue解析 markdown 文件
分享到: 更多 (0)

坚果云Markdown轻松记录您 灵感和创意

坚果云Markdown下载坚果云Markdown介绍