vue项目中要实现展示markdown文件[转载]
转载
版权声明:本文为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文件[转载]的更多相关文章
- vue项目中数学公式的展示
在这里有个mathjax的插件,可以将dom中的数学公式展示. 第一步安装mathjax npm install mathjax 安装完之后,你会在index.html中发现,已经引用了js文件,并且 ...
- vue项目中使用 SheetJS / js-xlsx 导入文件
原表格样式; 导入效果: 1. 安装 npm install xlsx 2. 在App.vue 中引入xlsx import * as XLSX from 'xlsx'; // 数据导出导入所需要的 ...
- vue项目中,如何对static文件夹下的静态文件添加时间戳,以达到清除缓存
例如config.js文件是存放在static文件夹下,里面存放的是websocket信息,需要经常改动.改动了以后由于缓存信息,使其不生效,因此需要对引入的文件添加时间戳. 最新方法: 注意转义符的 ...
- vue项目中使用axios上传图片等文件
form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据. html代码: <input name="file" type=&q ...
- vue项目中引入mui.poppicker.js文件时报错“Uncaught ReferenceError: mui is not defined”
解决:在mui.js的源文件后最后加上 window.mui = mui;
- vue项目中使用阿里iconfont图标
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...
- vue项目中使用bpmn-流程图xml文件中节点属性转json结构
内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...
- Vue项目中的文件/文件夹命名规范
Vue项目中的文件/文件夹命名规范 0.2262018.09.21 16:01:09字数 820阅读 6979 文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小 ...
- vue项目中使用Lodop实现批量打印html页面和pdf文件
1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩 ...
随机推荐
- 【Python开发】PyInstaller打包Python程序
PyInstaller是一个能将Python程序转换成单个可执行文件的程序, 操作系统支持Windows, Linux, Mac OS X, Solaris和AIX.并且很多包都支持开箱即用,不依赖环 ...
- javascript循环遍历数组输出key value
javascript循环遍历数组输出key value用$.each方法肯定不行的 所以采用如下方法<pre> markers = []; markers[2]=3; markers[3] ...
- seaborn做横向条形图
数据格式如下 这里选择fold值最大的前20个作图进行展示 代码如下 import seaborn as sns import pandas as pd import numpy as np impo ...
- springboot注入的四个注解
java配置主要靠java类和一些注解来达到和xml配置一样的效果,比较常用的注解有: @Configuration:声明一个类作为配置类,代替xml文件@Bean:声明在方法上,将方法的返回值加入B ...
- 封装关于金额计算的double工具类
由于直接使用double类型的加减乘除,可能会出现不可预测的问题,精度丢失等等.在业务中,计算金额是一件很重要的事情. 可以直接使用BigDecimal类,进行加减乘除.相关BigDecimal类介绍 ...
- CSP前的板子们
见窝的luogu博客qwq noip前的板子们
- Crazy Binary String(前缀和)(2019牛客暑期多校训练营(第三场))
示例: 输入: 801001001 输出:4 6 题意:一段长度为n且只有 ‘0’ 和 ‘1’ 的字符串,求子串中 ‘0’ 和 ‘1’ 数目相等和子序列中 ‘0’ 和 ‘1’ 数目相等的最大长度. 思 ...
- MySQL直方图
MySQL8.0开始支持索引之外的数据分布统计信息可选项 我们知道,在DB中,优化器负责将SQL转换为很多个不同的执行计划,完了从中选择一个最优的来实际执行.但是有时候优化器选择的最终计划有可能随着D ...
- VirtualBox导入OVA文件文档教程
1 2 修改框住的路径,最好不要在C盘 3 取消检查更新 4 5 6 7 8 9 10 11 等待加载完成:加载完成后 OVA文件导入成功 作者:含笑半步颠√ 博客链接:https://www.cnb ...
- java之hibernate之基于主键的双向一对一关联映射
这篇 基于主键的双向一对一关联映射 1.依然考察人和身份证的一对一关系,如果采用主键关联,那么其表结构为: 2.类结构 Person.java public class Person implemen ...