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文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

精读《Vue3.0 Function API》
这篇文章主要介绍了精读《Vue3.0 Function API》，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
VUEX 使用 mutations的两种方式
这篇文章主要介绍了VUEX 使用 mutations的两种方式,实现方式就是利用vuex中的mutations，在mutations中定义一个方法，这个方法就是把点击的index（也就是每个列表的唯一标识），传给state中的当前标识，需要的朋友可以参考下
2023-01-01
vue.config.js中配置分包策略及常见的配置选项
在Vue.js中分包（Code Splitting）是一种将应用程序代码拆分为不同的块或包的技术,从而在需要时按需加载这些包,下面这篇文章主要给大家介绍了关于vue.config.js中配置分包策略及常见的配置选项的相关资料,需要的朋友可以参考下
2024-02-02
vue 实现动态路由的方法
这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
vue 解决文本框被键盘遮住的问题
今天小编就为大家分享一篇vue 解决文本框被键盘遮住的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue实现的网易云音乐在线播放和下载功能案例
这篇文章主要介绍了vue实现的网易云音乐在线播放和下载功能,结合具体实例形式分析了网易云音乐相关接口调用与操作技巧,需要的朋友可以参考下
2019-02-02
解决vue单页面回退页面 keeplive 缓存问题
这篇文章主要介绍了解决vue单页面回退页面 keeplive 缓存问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue+Element实现表格编辑、删除、以及新增行的最优方法
这篇文章主要为大家详细介绍了Vue+Element实现表格的编辑、删除、以及新增行的最优方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
vue百度地图修改折线颜色,添加icon和文字标注方式
这篇文章主要介绍了vue百度地图修改折线颜色,添加icon和文字标注方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue3+element Plus实现在table中增加一条表单数据的示例代码
这篇文章主要介绍了vue3+element Plus实现在table中增加一条表单数据的操作,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-01-01