方案1:每次都需要重新打包,每次修改都需要build

  直接使用require + v-html;

核心代码如下:  
  1. 首先需要添加MD文件的loader就是 markdown-loader
    npm install --sava markdown-loader   2. 然后require加载对应的资源,也可以通过ajax获取资源对象
    this.htmlMD = require('./xxx.md');
      或
    axios.get(url).then((response) => {      
      this.htmlMD = response.data;
    });
  3. 最后通过v-html展示在对应的结构块即可
     <div v-html="htmlMD"></div>

方案2: 直接读取static静态资源MD文件

  使用vue-markdown组件 + axios;

  1. 首先下载 vue-loader 和 vue-markdown 组件
  npm install --sava markdown-loader vue-markdown

  2. 然后获取对应的资源对象
  const url = `./xxx.md`;
  axios.get(url).then((response) => {
  this.htmlMD = response.data;
  });
  3. 最后在 vue-markdown 组件上展示即可,记得在 components 上先导入
  <VueMarkdown :source="htmlMD"></VueMarkdown>

还有一个最重要的代码部分忘记写了,现在补充上

// 拉取该文件夹下所有文件信息
const filesMD = require.context('@/../static/xxxxMD', true, /\.md$/);
const filesMDNames = filesMD.keys();
const tmepListDatas = [];
filesMDNames.map((item) => {
const listObj = {};
const listItemS = item.split('/');
if (listItemS.length > 0) {
listObj.name = listItemS[1].replace('.md', '');
listObj.path = item;
listObj.children = [];
listObj.showChild = false;
}
  return tmepListDatas.push(listObj);
});

上面这段代码的意思是:如果获取某个文件夹下面的所有md文件,拿到整个文件夹的信息后可以用于生成侧边栏以及别的操作

欢迎关注博主:微信公众号交流,不定时更新前端资源

vue展示md文件,前端读取展示markdown文件的更多相关文章

  1. 前端读取Excel报表文件 js-xlsx

    1.http://www.cnblogs.com/imwtr/p/6001480.html (前端读取Excel报表文件) 2.https://github.com/SheetJS/js-xlsx

  2. C#选择多个文件并读取多个文件数据

    原文:C#选择多个文件并读取多个文件数据 版权声明:本文为博主原创文章,转载请附上链接地址. https://blog.csdn.net/ld15102891672/article/details/8 ...

  3. base64编码后的pdf文件前端页面展示--pdf.js的应用

    最近在整理项目中用到的插件或者使用心得,感觉还是写成博客,能加深新一层的理解. 我先说一下我的需求:由于java后台编译的文件流在手机端加载速度太慢,所以想着可以在前端解析,放在页面展示给用户. 所以 ...

  4. 使用js-xlsx库,前端读取Excel报表文件

    在实际开发中,经常会遇到导入Excel文件的需求,有的产品人想法更多,想要在前端直接判断文件内容格式是否正确,必填项是否已填写 依据HTML5的FileReader,可以使用新的API打开本地文件(参 ...

  5. 前端读取Excel报表文件

    在实际开发中,经常会遇到导入Excel文件的需求,有的产品人想法更多,想要在前端直接判断文件内容格式是否正确,必填项是否已填写 依据HTML5的FileReader,可以使用新的API打开本地文件(参 ...

  6. C#中选中指定文件并读取类似ini文件的内容

    一.背景 由于项目中需要去读取设备的配置信息,配置文件的内容和INI配置文件的格式类似,所以可以按照INI文件的方式来处理.涉及如何打开一个文件,获取打开的文件的路径问题,并读取选中的文件里边的内容. ...

  7. 文件的读取(txt文件)

    一.将读取文件夹内容,变为字典保存,代码如下: def read_class_names(class_file_name): '''loads class name from a file''' na ...

  8. numpy的文件存储,读取 .npy .npz 文件

    Numpy能够读写磁盘上的文本数据或二进制数据. 将数组以二进制格式保存到磁盘 np.load和np.save是读写磁盘数组数据的两个主要函数,默认情况下,数组是以未压缩的原始二进制格式保存在扩展名为 ...

  9. springMvc上传文件、读取zip/rar文件

    参考文章: http://www.cnblogs.com/interdrp/p/6734033.html 方法一: 1)没有配置org.springframework.web.multipart.co ...

随机推荐

  1. 201871010110-李华《面向对象程序设计(java)》第八周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  2. 201871010132--张潇潇--《面向对象程序设计(java)》第十六周学习总结

      博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh 这个作业的要求在哪里 https://www.cnblogs.c ...

  3. java+selenium3学习之一启动firefox浏览器

    package ceshi.com.lessons; import java.util.concurrent.TimeUnit; import org.openqa.selenium.By; impo ...

  4. 浅谈SOA与RPC

    一.SOA 英文名称:Service Oriented Ambiguity 中文名称:面向服务架构 SOA是一种思想,目的是提供一种设计项目的思路,让开发时更有效率. 例如原来的分布式项目中,在每个项 ...

  5. biopython处理中蜂基因组

    1.安装包 pip install bcbio-gff pprint 2.显示中蜂的序列 from Bio import SeqIO genome_name = 'GCF_001442555.1_AC ...

  6. A1037 Magic Coupon (25 分)

    一.技术总结 这也是一个贪心算法问题,主要在于想清楚,怎么解决输出和最大,两个数组得确保符号相同位相乘,并且绝对值尽可能大. 可以用两个vector容器存储,然后排序从小到大或是从大到小都可以,一次从 ...

  7. [ Python入门教程 ] Python基础语法

    Python的语法非常简练,因此用Python编写的程序可读性强.容易理解.本章将介绍Python的基本语法和概念. Python文件类型 1.源代码.Python的源代码的扩展名以py结尾,可直接运 ...

  8. opera11以下添加搜索引擎的办法

    opera11以下:首选项,搜索引擎设置添加搜索引擎,地址是https://www.baidu.com/s?wd=%s 这是从其他浏览器里面得到的. opera11以上: http://www.bai ...

  9. Linux性能优化实战学习笔记:第四十讲

    一.上节回顾 上一节,我们学习了碰到分布式拒绝服务(DDoS)的缓解方法.简单回顾一下,DDoS利用大量的伪造请求,导致目标服务要耗费大量资源,来处理这些无效请求,进而无法正常响应正常用户的请求. 由 ...

  10. jquery easyui datagrid 加载保存好的自定义设置的列属性

    直接附上源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...