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 24 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 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 文件上传代码(限制jpg文件)
2010/01/05 PHP
php网站地图生成类示例
2014/01/13 PHP
php随机显示图片的简单示例
2014/02/15 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
js实现简易拖拽的示例
2020/10/26 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
Python进行数据提取的方法总结
2016/08/22 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
numpy中的高维数组转置实例
2018/04/17 Python
Python判断telnet通不通的实例
2019/01/26 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
初中生学习生活的自我评价
2013/11/20 职场文书
户外拓展活动方案
2014/02/11 职场文书
商业项目策划方案
2014/06/05 职场文书
李强优秀员工观后感
2015/06/16 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书