前言

最近搞了一段时间vue开发，发现一个比较常见的需求，但是整体的解决方案不是很明确，就是在vue开发的网页中展示markdown。这是一个对程序猿很常见的需求，在网页中有层次的展示一些内容，Markdown是一个非常好的方式。

所以准备写一篇博客，介绍在vue项目下，使用mavon-editor展示md文件的过程，具体在实现过程和思路中包含了：mavon-editor的插件介绍、引入和如何在.vue文件中使用，并在最后给出了一个实现例子，大家可以选需要的部分查看。

写了1个示例程序，跑起来是上面的效果，可以看到实现了Markdown语法的解析和展示，本文将介绍

需求分析

1.需求

• 读取Markdown文件
• 解析Markdown文件（处理md语法）
• 展示Markdown文件（完成md的高亮展示等）

读取Markdown的文件，我们自己写就能实现，Mardown的解析和展示部分，我们选择mavon-editor来实现。

2.现有方案
mavon-editor是网上主流的解决方案，下面给出了其在npm和github仓库的地址。

• mavon-editor - npm
• mavon-editor - Github

点开可以发现，有详细的文档，对其中的选项进行说明。

但是，这实际上是一款Markdown编辑器，如下图。实现的是Markdown文本的在线编辑，如果我们想在网页中用它来展示.md文件需要做一些配置。

实现思路和过程

1.安装和引入

npm install mavon-editor --save

我们可以在Vue全局或者组件中引入mavon-editor，我是在组件中进行引入的。

/*在script中引入mavonEditor相关，来展示Markdown*/
import Vue from "vue";
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
Vue.component("mavon-editor", mavonEditor);

2.使用mavon-editor

（1）在Vue的模版部分引入相关标签

<!--字段解释：
    subfield：双栏or单栏
    defaultOpen：preview  展示区域，预览区域
    toolbarsFlag：false，工具栏展示
-->
<mavon-editor class="markdown"
     :value="get_mark_data()"
     :subfield = "false"    
     :defaultOpen = "prop.defaultOpen"
     :toolbarsFlag = "prop.toolbarsFlag"
     :editable="prop.editable"
     :scrollStyle="prop.scrollStyle"
></mavon-editor>

这里要注意:value中的内容，是我们要展示的数据，我这里是写了一个方法，返回了对应的数据。

（2）在计算属性中，添加对应的属性

computed: {
      prop () {
        let data = {
          subfield: false,// 单双栏模式
          defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域 
          editable: false,
          toolbarsFlag: false,
          scrollStyle: true
        }
        return data
      }
    },

在这里处理prop的数据，前面我们在view中绑定了prop。官方文档中列出了详细的API，我们可以根据需要在prop中进行添加。

（3）添加对应的样式

<style scoped>
.markdown {
  width: 700px;
  /* 暂时未限制高度 height: 500px;*/
  margin: 0 auto;
}
</style>

写到这里，如果我们在HTML中写的函数get_mark_data()中有一些数据，并return的话，我们就可以在页面中看到展示的markdown数据了。（也就是开篇第一张图中的效果）

后面我们只需要重写get_mark_data()函数，在这个函数中读入我们本地的md文件即可。

从本地读入md文件

从本地读取文件是一件比较困难的事情，Node.js虽然提供fs作为读取文件的方式（fs.readFile），但并不适合前端的代码（I/O问题，vue中不能使用），比较合理的做法是后端读取md文件，形成API，前端中的代码进行调用。

另外一种方式是使用XMLHttpRequest，在本地测试的时候比较方便，通过HTTP请求来读取本地文件，但后端的事情还是应该后端来来做。

最后的话

如果你的项目是一个以博客为主的项目，建议使用Vue作者（尤雨溪大大）推荐的博客工具Vuepress，能够快速搭建基于vue和webpack的博客系统，也是开源的，可以自行去官网下载。

如果本身不是一个内容展示系统，而是需要在整个项目组展示少量的md文本，这样可以考虑本文提到的这种方式。

参考资料

【1】使用mavonEditor写文章，并且很好的预览。—小道仙
【2】Vue项目通过读取本地文件内容来显示内容 —SilenceJude
【3】Vuepress中文网，中文文档

PS：我把这篇博客用到的代码写成了1个小例子，是我开始展示的vue页面，如果有需要自行下载。如果有什么错误或问题，欢迎进行讨论～