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 Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
jQuery实现手风琴特效
Jan 11 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
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
PHP7 list() 函数修改
2021/03/09 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
python实现控制台打印的方法
2019/01/12 Python
numpy基础教程之np.linalg
2019/02/12 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
努比亚手机官网:nubia
2016/10/06 全球购物
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
五月的鲜花活动方案
2014/08/21 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
居住证明范文
2015/06/17 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书