转载

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

1)安装npm install text-loader --save

2)在webpack.base.config.js中添加
{
test: /.md$/,
loader: ‘text-loader’
}
然后通过import READMD from ‘./README.md’,即可正确获取.md文件中的md原始内容。 3)安装md解析器如vue-markdown,npm install vue-markdown --save
vue文件代码如下:
<template>
<div>
<h1>document</h1>
<vue-markdown>{{msg}}</vue-markdown>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown';
import README from './README.md';
export default {
name:'document',
components:{
VueMarkdown
},
data(){
return{
msg:README
}
},
methods:{ }
}
</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. [计算机视觉][神经网络与深度学习]R-FCN、SSD、YOLO2、faster-rcnn和labelImg实验笔记

    R-FCN.SSD.YOLO2.faster-rcnn和labelImg实验笔记 转自:https://ask.julyedu.com/question/7490 R-FCN paper:https: ...

  2. Oracle spatial与arcsde 的关系

    有一些同事问过我下面这些问题: 我们用了oracle spatial sdo_geometry,是不是没用arcsde? 我们到底是使用oracle spatial还是arcsde,有点懵! 执行了c ...

  3. java byte与int互相转换

    一.Int2Byte byte[] bytes = new byte[4]; for (int i = 0; i < 4; i++) { bytes[i] = (byte)(integer &g ...

  4. [转帖]推荐一款比 Find 快 10 倍的搜索工具 FD

    推荐一款比 Find 快 10 倍的搜索工具 FD https://www.hi-linux.com/posts/15017.html 试了下 很好用呢. Posted by Mike on 2018 ...

  5. vue中指令绑定的v-if逻辑结构

    <!-- if判断 --> <div id="app2"> <p v-if="seen"> <!-- 给p标签绑定指令 ...

  6. Python规范:代码规范要注意

    主要有以下两种代码规范 <8 号 Python 增强规范>(Python Enhacement Proposal #8),以下简称 PEP8: <Google Python 风格规范 ...

  7. 2019-10-11 ubuntu ssh远程免密登录配置及配置别名

    在客户端能正常远程访问服务端的前提下. 客户端: 1)配置免密 执行 ssh-keygen 即可生成 SSH 钥匙,回车三次. 执行 ssh-copy-id user@remote,可以让远程服务器记 ...

  8. tkinter学习笔记_01

    知识点目录: 1. 文本框 Label var = tk.StringVar() # 文本框 bg 背景颜色 fonnt 字体设置 width 长 height 高 l = tk.Label(root ...

  9. 支付宝支付回调方法RSA2验签失败处理方法

    支付宝支付签名方式RSA2生成支付时使用的是支付宝公钥和应用私钥, 而不是应用公钥,支付宝公钥的生成是根据上传应用公钥而变动的, 所以在做回调的时候参数ALIPAY_PUBLIC_KEY也需要传支付宝 ...

  10. 5.安装CentOS后,开机找不到Win10的启动选项解决办法

    现象:在Win10下安装了CentOS7双系统,开机后,居然发现找不到Win10启动选项,默认进入了CentOS系统. 解决办法: 方法一:笔者一般是用创建一个Win10启动盘,电脑重启进入启动盘后, ...