转载

版权声明:本文为CSDN博主「齐天二圣」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/nihaoa50/article/details/83744989

  1. 1)安装npm install text-loader --save
  2.  
  3. 2)在webpack.base.config.js中添加
  4. {
  5. test: /.md$/,
  6. loader: text-loader
  7. }
  8. 然后通过import READMD from ‘./README.md’,即可正确获取.md文件中的md原始内容。
  9.  
  10. 3)安装md解析器如vue-markdownnpm install vue-markdown --save
  11. vue文件代码如下:
  12. <template>
  13. <div>
  14. <h1>document</h1>
  15. <vue-markdown>{{msg}}</vue-markdown>
  16. </div>
  17. </template>
  18. <script>
  19. import VueMarkdown from 'vue-markdown';
  20. import README from './README.md';
  21. export default {
  22. name:'document',
  23. components:{
  24. VueMarkdown
  25. },
  26. data(){
  27. return{
  28. msg:README
  29. }
  30. },
  31. methods:{
  32.  
  33. }
  34. }
  35. </script>

vue项目中要实现展示markdown文件[转载]的更多相关文章

  1. vue项目中数学公式的展示

    在这里有个mathjax的插件,可以将dom中的数学公式展示. 第一步安装mathjax npm install mathjax 安装完之后,你会在index.html中发现,已经引用了js文件,并且 ...

  2. vue项目中使用 SheetJS / js-xlsx 导入文件

    原表格样式; 导入效果: 1.  安装 npm install xlsx 2. 在App.vue 中引入xlsx import * as XLSX from 'xlsx'; // 数据导出导入所需要的 ...

  3. vue项目中,如何对static文件夹下的静态文件添加时间戳,以达到清除缓存

    例如config.js文件是存放在static文件夹下,里面存放的是websocket信息,需要经常改动.改动了以后由于缓存信息,使其不生效,因此需要对引入的文件添加时间戳. 最新方法: 注意转义符的 ...

  4. vue项目中使用axios上传图片等文件

    form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据. html代码: <input name="file" type=&q ...

  5. vue项目中引入mui.poppicker.js文件时报错“Uncaught ReferenceError: mui is not defined”

    解决:在mui.js的源文件后最后加上 window.mui = mui;

  6. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  7. vue项目中使用bpmn-流程图xml文件中节点属性转json结构

    内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...

  8. Vue项目中的文件/文件夹命名规范

    Vue项目中的文件/文件夹命名规范 0.2262018.09.21 16:01:09字数 820阅读 6979 文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小 ...

  9. vue项目中使用Lodop实现批量打印html页面和pdf文件

    1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩 ...

随机推荐

  1. java8新特性六-Optional 类

    Optional 类是一个可以为null的容器对象.如果值存在则isPresent()方法会返回true,调用get()方法会返回该对象. Optional 是个容器:它可以保存类型T的值,或者仅仅保 ...

  2. Java设计模式--代理模式+动态代理+CGLib代理

    静态代理 抽象主题角色:声明真实主题和代理主题的共同接口. 代理主题角色:代理主题内部含有对真实主题的引用,从而在任何时候操作真实主题对象:代理主题提供一个与真实主题相同的接口,以便在任何时候都可以代 ...

  3. [转帖]DCEP究竟是什么?

    DCEP究竟是什么? https://www.cnblogs.com/kaixin2018/p/11795534.html DCEP (Digital Currency Electronic Paym ...

  4. AVR单片机教程——按键状态

    好久没更新了,今天开始继续,争取日更. 今天我们来讲按键.开发板的右下角有4个按键,按下会有明显的“咔嗒”声.如何检测按键是否被按下呢?首先要把按键或直接或间接地连接到单片机上.与之前使用的4个LED ...

  5. Linux -- touch 命令

    在Linux中,每个文件都关联一个时间戳,并且每个文件搜会存储最近一次访问的时间.最近一次修改的时间和最近一次变更的时间等信息.所以,无论何时我们创建一个新文件,访问或者修改一个已经存在的文件,文件的 ...

  6. Locust性能测试_百度案例

    一.安装: 1.Locust在PyPI上可用,可以通过pip或easy_install安装:pip install locustio                2.查看Locust可用选项:loc ...

  7. 实时监听 JavaScript改变 input 值 input输入框内容 value 变化实时监听

    思路:通过setInterval()方法去定时对比新旧值 当时候JavaScript的onchange 和onpropertychange(注意ie版本) 监听输入框input时间,人为改变值是可以触 ...

  8. 线程池ThreadPool实战

    线程池ThreadPool 线程池概念 常用线程池和方法 1.测试线程类 2.newFixedThreadPool固定线程池 3.newSingleThreadExecutor单线程池 4.newCa ...

  9. 【洛谷 P3966】 [TJOI2013]单词(AC自动机,差分)

    把单词连起来,中间插入间隔符,同 #include <cstdio> #include <queue> #include <cstring> using names ...

  10. 平衡二叉树详解——PHP代码实现

    一.什么是平衡二叉树 平衡二叉树(Self-Balancing Binary Search Tree 或者 Height-Balancing Binary Search Tree)译为 自平衡的二叉查 ...