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 相关文章推荐
基于jquery的滚动新闻列表
Jun 19 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
微信JS接口大全
Aug 25 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
vue2中使用less简易教程
Mar 27 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
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
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
php实现无限级分类
2014/12/24 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
浅谈python 线程池threadpool之实现
2017/11/17 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
pycharm配置git(图文教程)
2019/08/16 Python
python文件读写代码实例
2019/10/21 Python
python实现LRU热点缓存及原理
2019/10/29 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
python logging 日志的级别调整方式
2020/02/21 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
python 装饰器的基本使用
2021/01/13 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
精细化工应届生求职信
2013/11/17 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
爱之链教学反思
2014/04/30 职场文书
组工干部对照检查材料
2014/08/25 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
体育教师个人总结
2015/02/09 职场文书
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
Elasticsearch 配置详解
2022/04/19 Java/Android