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插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
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
php 定义404页面的实现代码
2012/11/19 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
javascript面向对象之Javascript 继承
2010/05/04 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
详解vuex的简单使用
2018/03/12 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
python自定义类并使用的方法
2015/05/07 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
一份婚庆公司创业计划书
2014/01/11 职场文书
小学生新年寄语
2014/04/03 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
索赔员岗位职责
2015/02/15 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
ant design vue的form表单取值方法
2022/06/01 Vue.js