vue-cli3项目展示本地Markdown文件的方法


Posted in Javascript onJune 07, 2019

【版本】

  • vue-cli3
  • webpack@4.33.0

【步骤】1、安装插件vue-markdown-loader

npm i vue-markdown-loader -D

ps:这个插件是基于markdown-it的,不需要单独安装markdown-it。

2、修改vue.config.js配置文件(如果没有,在项目根目录新建一个):

module.exports = {
 chainWebpack: config => {
  config.module.rule('md')
   .test(/\.md/)
   .use('vue-loader')
   .loader('vue-loader')
   .end()
   .use('vue-markdown-loader')
   .loader('vue-markdown-loader/lib/markdown-compiler')
   .options({
    raw: true
   })
 }
}

3、直接上代码

App.vue

<template>
 <my-markdown></my-markdown>
</template>

<script>
import myMarkdown from './assets/cpu.md';
export default {
 components: {
  myMarkdown
 },
</script>

正常情况下,到这里就结束了。

【坑】

由于业务给我的Markdown文档的标题是这样的:

##物理CPU个数
物理CPU数就是主板上实际插入的CPU数量
……

得到的结果并不让我满意:

vue-cli3项目展示本地Markdown文件的方法

折腾了大半天才发现,这是由于标题的#井号和文字之间没有空格导致的。证明见下:

var MarkdownIt = require('markdown-it'),
md = new MarkdownIt();
console.log(md.render('# markdown-it rulezz!'))//<h1>markdown-it rulezz!</h1>
console.log(md.render('#markdown-it rulezz!'))//<p>#markdown-it rulezz!</p>

Fine :)

愚蠢的我想出了一个解决办法:

因为HyperDown.js能避免上面那样的情况,于是我用它来对文档做预处理。

安装HyperDown.js

npm install hyperdown -D

然后把vue.config.js改成了这样。

let HyperDown = require('hyperdown');
let parser = new HyperDown;

module.exports = {
 chainWebpack: config => {
  config.module.rule('md')
   .test(/\.md/)
   .use('vue-loader')
   .loader('vue-loader')
   .end()
   .use('vue-markdown-loader')
   .loader('vue-markdown-loader/lib/markdown-compiler')
   .options({
    // markdown-it config
    preset: 'default',
    breaks: true,
    raw: true,
    typographer: true,
    preprocess: function(markdownIt, source) {
     return parser.makeHtml(source);//重点在这里!!!
    }
   })
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用Javascript接收get传递的值的代码
Nov 30 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 #Javascript
详解vue项目中实现图片裁剪功能
Jun 07 #Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 #Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 #Javascript
Vue中实现权限控制的方法示例
Jun 07 #Javascript
vue 父组件中调用子组件函数的方法
Jun 06 #Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 #Javascript
You might like
WHOIS类的修改版
2006/10/09 PHP
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
iOS10推送通知开发教程
2016/09/19 PHP
PHP时间函数使用详解
2019/03/21 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
Python素数检测的方法
2015/05/11 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
委托证明的格式
2014/01/10 职场文书
委托公证书范本
2014/04/03 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
汽车转让协议书范本
2014/12/07 职场文书
公务员政审材料
2014/12/23 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
费用申请报告范文
2015/05/15 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js