Vue 页面读取并展示 Markdown 文件

前言

如何在 Vue 中读取项目本地的 MarkDown 文件并展示在网页上呢?查阅资料后发现,一般的方案是在 Vue 页面中引入 Markdown 编辑器,然后利用编辑器的预览功能来展示 MarkDown 文件的内容。推荐使用开源的 MarkDown 编辑器 mavonEditor 或者 vue-meditor

vue-meditor 介绍

简介

vue-markdown 是一款使用 markedhighlight.js 开发的一款 MarkDown 编辑器,主要包括三个部分:

  • 简单版编辑器,左侧文本输入框使用 textarea 实现
  • 专业版编辑器,左侧输入框使用 codemirror 实现
  • MarkDown 预览组件,可单独使用

显示效果图



vue-meditor 使用

使用 NPM 安装

1
$ npm i -S vue-meditor

在项目中引入组件

在 Vue 页面中引入 vue-meditor 的预览组件 MarkdownPreview,完整示例代码如下,编辑器的完整基本属性可查阅 官方文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
<div class="markdown">
<MarkdownPreview
v-model="content"
:height="1024"
:isPreview=true
:bordered=false
:copyCode=true
theme="oneDark"
/>
</div>
</template>

<script>
import MarkdownPreview from 'vue-meditor'
export default {
name: 'markdown',
data () {
return {
content: ''
}
},
components: {
MarkdownPreview
},
created () {
// 读取本地的Markdown文件
this.$http.get('/static/guide/start.md').then((response) => {
if (response.data) {
this.content = response.data
}
})
}
}
</script>

值得一提的是,/static/guide/start.md 是 Vue 项目根目录下 MarkDown 文件的路径,上面的代码通过 HTTP 请求去读取 Markdown 文件,这样的优势是可以实时预览 MarDown 文件的内容。

最终实现的效果图

参考资料