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中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
VUE递归树形实现多级列表
Jul 15 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代码的53条建议
2008/03/27 PHP
php MySQL与分页效率
2008/06/04 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Python设计模式之中介模式简单示例
2018/01/09 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
Python 发送邮件方法总结
2020/08/10 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
解放思想大讨论活动心得体会
2014/09/11 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
幼师求职自荐信
2015/03/26 职场文书
高一军训口号
2015/12/25 职场文书