文章目录

前言一、导入步骤1.下载插件2.将文件复制粘贴到vue文件的components文件夹下3.在需要引入的.vue文件中导入 二、在需要显示博客的界面调用

---

前言

此篇文章讲解如何在vue项目中导入markdown插件

---

一、导入步骤

1.下载插件

地址如下：

https://github.com/hinesboy/mavonEditor

2.将文件复制粘贴到vue文件的components文件夹下

如下（最后一行）：

3.在需要引入的.vue文件中导入

示例代码：

import { mavonEditor } from 'mavon-editor' import 'mavon-editor/dist/css/index.css'

这里设置为position:static，否则它会在最上层显示，挡住对话框等样式

<mavon-editor v-model="content" ref="md" @change="change" style="min-height: 45vw;position:static" />

二、在需要显示博客的界面调用

只显示浏览界面即可：

<mavon-editor style="position:static" class="blogPage" :subfield="false" :defaultOpen="'preview'" :toolbarsFlag="false" :editable="false" :scrollStyle="true" :ishljs="true" v-model="value" />

另外，我们也可以把需要展示的文本内容使用markwown进行排版，通过上述代码设置value，直接将内容显示给用户：

<div> <mavon-editor style="position:static" class="blogPage" :subfield="false" :defaultOpen="'preview'" :toolbarsFlag="false" :editable="false" :scrollStyle="true" :ishljs="true" value="::: hljs-center ## 军民融合协同创新中心 ::: 1. 军民融合协同创新中心由中北大学大数据学院与山西百信信息技术有限公司联合共建，全部采用百信基于国产龙芯处理器的安全可靠计算机，可搭载国产操作系统、数据库、中间及软件开发平台，是山西省乃至全国在计算机系统领域内建设最早具有自主可控鲜明特色的创新示范中心之一。 2. 军民融合协同创新中心的总体建设目标是服务国家军民融合发展战略，培养优秀人才，推进国产自主可控安全可靠计算机软硬件系统的研究。开发与应用，提升我国网络安全与信息化自主创新发展能力和促进军民融合深度发展，最终形成网络安全人才培养、技术创新、产业发展的良性循环。 3. 军民融合协同创新中心具备自主可控计算机系统人才培养、应用研发、测试等功能。创新中心不仅承担着培养符合国家自主安全战略的网信事业专门人才，推进国产自主可控安全可靠计算机软硬件系统的研究、开发与应用,特别是军工领域的应用示范，更是担负加快推进国产自主可控替代计划，构建安全可控的信息技术体系,实现产学研的有机结合和国防科技成果的有效转换，进而推动我国网络强国的建设。 " /> </div>

效果如下图：

---