Vue 展示.md文件的方法详解

更新时间：2023年05月23日 09:52:27 作者：心动止于人海。

这篇文章主要介绍了Vue 展示.md文件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

1.下载所需package

npm i vue-markdown-loader -D
npm i vue-loader@14.2.2 -D

npm vue-template-compiler -D (若是已经有则不需要安装，不然有可能和现有的vue版本不匹配从而报错)

vue-loader版本过高会不兼容，经过测试安装14.2.2版本可以使用

vue-template-compiler需要和vue的版本一致

（若是直接安装vue-loader最新版会提示升级vue和vue-compiler,但是升级后的vue没有和vue-template-compiler匹配的版本，所以我选择降低vue-loader版本）

# 样式
npm i github-markdown-css -D
npm i highlight.js -D

2.在vue.config.js配置

module.exports = {
  publicPath: './',
  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.在页面使用

<template>
<!-- class markdown-body 必须加，否则标签样式会出现问题 -->
<div class="markdown-body">
<markdown />
</div>
</template>
<script>

4.js引入

<script>
// 引⼊ markdown ⽂件，引⼊后是⼀个组件，需要在 components 中注册
import markdown from '@/assets/md/Android_MQTT.md'
// 代码⾼亮
import 'highlight.js/styles/github.css'
import 'github-markdown-css'
// 其他元素使⽤ github 的样
export default {
  components: { markdown }
}
</script>

到此这篇关于Vue 展示.md文件的文章就介绍到这了,更多相关Vue 展示.md文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue.config.js中配置Vue的路径别名的方法
这篇文章主要介绍了vue.config.js中配置Vue的路径别名的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
Vue修改Dom不生效的解决
这篇文章主要介绍了Vue修改Dom不生效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
vue大型项目之分模块运行/打包的实现
这篇文章主要介绍了vue大型项目之分模块运行/打包的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
vue下如何利用canvas实现在线图片标注
这篇文章主要介绍了vue下如何利用canvas实现在线图片标注，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
为Vue3 组件标注 TS 类型实例详解
这篇文章主要为大家介绍了为Vue3 组件标注 TS 类型实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
关于Vue3过渡动画的踩坑记录
在开发中我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验,下面这篇文章主要给大家介绍了关于Vue3过渡动画踩坑的相关资料,需要的朋友可以参考下
2021-12-12
vue新手入门出现function () { [native code]&nbs
这篇文章主要介绍了vue新手入门出现function () { [native code] }错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue项目中created()被调用多次的踩坑实战
在vue项目中我在created中调用了两次get数据请求,所以下面这篇文章主要给大家介绍了关于vue项目中created()被调用多次的踩坑实战,需要的朋友可以参考下
2023-03-03
vue单页面如何解决多个视频同时仅能播放一个问题
这篇文章主要介绍了vue单页面如何解决多个视频同时仅能播放一个问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue3源码通过render patch 了解diff
这篇文章主要为大家介绍了Vue3源码系列通过render及patch了解diff原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11