vue导入.md文件的步骤(markdown转HTML)


Posted in Vue.js onDecember 31, 2020

前言

刚接到这个需求的时候,觉得很简单(的确很简单)但是这玩意的坑真的也让人无奈。

网上找了很多的资料,都没有写出痛点(这就很难过了)。通过实践并且在我们项目中平稳运行,想分享给后面的人

我的博客上也写了100多篇文章,点击量有上万的也有个位数的,能够帮助到他人这就是写作记录的动力。

需求

vue项目中可以良好展示markdown(只是展示功能 没有编辑功能)

痛点问题

  1. .md文件类型,直接模块加载(只有字符串,这得多难受,怎么维护呢),还是一个文件一个文件的好维护并且好修改复用
  2. 用第三方插件,只是md转HTML,不带样式的(重点强调 没有样式没有样式)

解决方案

一、vue需要有markdown这样良好的展示效果,什么样的插件是最好的?

货比三家,我推荐以下方式

//安装
npm install --save html-loader;
npm install -- save markdown-loader;

//webpack
 {
   test: /\.md$/,
   loader: "html-loader",
 },
 {
   test: /\.md$/,
   loader: "markdown-loader"
 }

大坑预警:我不知道在哪里抄的配置,一定不要配置option(配置了的话表格 代码 都不能好好转化)

以上真的就完成了转化了。是不是so easy !!! 再来换个皮肤(穿上衣服)

二、一定要引用CSS,找了很多样式真的都特别的丑(当然可以自己写,但是费时间啊)

强烈推荐

npm install github-markdown-css
import 'github-markdown-css'; //哪里用markdown 就在哪里引用 可以放在min.js

//自己也可以再调整调整 (贡献一版 我们调整的一版样式)
.markdown-body {
 padding: 20px;
 min-width: 200px;
 max-width: 900px;
 font-size: 12px;
 h2 {
 font-size: 18px;
 margin: 1em 0 15px;
 padding-top: 0.8em;
 padding-bottom: 0.8em;
 }
 h3 {
 font-size: 14px;
 margin: 22px 0 16px;
 }
 h4 {
 font-size: 13px;
 margin: 20px 0 16px;
 }
 h5 {
 font-size: 12px;
 margin: 16px 0 16px;
 font-weight: 700;
 }
 p {
 font-size: 12px;
 line-height: 24px;
 color: #666666;
 margin-top: 0px;
 margin: 8px 0;
 margin: 14px 0 14px;
 }
 pre {
 background-color: #eee;
 margin-bottom: 8px;
 margin-top: 8px;
 margin: 12px 0 12px;
 }
 blockquote {
 margin-bottom: 8px;
 margin-top: 8px;
 margin: 14px 0 14px;
 background-color: #eee;
 padding: 16px 16px;
 }
 tr {
 background-color: #f5f5f5;
 }
 code {
 background-color: #eee;
 }
 ul,
 ol,
 li {
 list-style: unset;
 font-size: 12px;
 line-height: 20px;
 color: #666666;
 margin-top: 0px;
 margin: 8px 0;
 }
 blockquote {
 border-color: #48b6e2;
 }
 table {
 display: table;
 width: 100%;
 max-width: 100%;
 margin-bottom: 20px;
 }
}

三、页面运用(实践检验真理)

页面
<template>
 <div class="markdown-body" v-html="htmlMD"></div> //markdown-body 一定要写这个class名
</template>

<script>
export default {
 name: 'GitBook',
 data() {
 return {
  htmlMD: ''
 };
 },
 mounted() {
 this.getHtmlMD(this.$route.query.databaseType);
 },
 methods: {
 getHtmlMD(type) {
  this.htmlMD = require(`./GitBook/${type.toLowerCase()}.md`); //导入md 我这里根据不同的类型拿不同md文件
 }
 }
};
</script>

四、最终效果 (表格,代码(缩进完全没有问题)我懒的去写一个实例了)打码勿怪

vue导入.md文件的步骤(markdown转HTML)

以上就是vue导入.md文件的步骤(markdown转HTML)的详细内容,更多关于vue 导入.md文件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 #Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 #Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 #Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 #Vue.js
梳理一下vue中的生命周期
Dec 30 #Vue.js
Vue实现简易购物车页面
Dec 30 #Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 #Vue.js
You might like
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
php获取参数的几种方法总结
2014/02/18 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
vue内置指令详解
2018/04/03 Javascript
angularJS开发注意事项
2018/05/26 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
在vue 中使用 less的教程详解
2018/09/26 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
Django中使用Celery的方法示例
2018/11/29 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
网络工程专业毕业生推荐信
2013/10/28 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
未婚证明书模板
2014/10/08 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2014年城管工作总结
2014/11/20 职场文书
欠条格式范本
2015/07/03 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL