Vue 页面读取并展示 Markdown 文件

发表于 阅读次数： 评论数： 本文字数： 589 阅读时长 ≈ 1 分钟

前言

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

vue-meditor 介绍

简介

提示

vue-markdown 是一款使用 marked 和 highlight.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 文件的内容。

最终实现的效果图

参考资料