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

您可能感兴趣的文章:

vuecli项目构建SSR服务端渲染的实现
这篇文章主要介绍了vuecli项目构建SSR服务端渲染的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
vue后台返回格式为二进制流进行文件的下载方式
这篇文章主要介绍了vue后台返回格式为二进制流进行文件的下载方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vue中使用百度脑图kityminder-core二次开发的实现
这篇文章主要介绍了vue中使用百度脑图kityminder-core二次开发的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
elementUI中el-upload文件上传的实现方法
ElementUI的组件支持多种事件钩子,如http-request、before-upload和on-change,以实现自定义文件上传处理,这篇文章主要介绍了elementUI中el-upload文件上传的实现方法,需要的朋友可以参考下
2024-11-11
Vue中正确使用jQuery的方法
这篇文章主要为大家详细介绍了Vue中正确使用jQuery的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
Vue Baidu Map之自定义点图标bm-marker的示例
这篇文章主要介绍了Vue Baidu Map之自定义点图标bm-marker,文中给大家介绍了vue-baidu-api地图标记点（自定义标记图标），设置标记点的优先级问题，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-08-08
vue.js的手脚架vue-cli项目搭建的步骤
这篇文章主要介绍了vue.js的手脚架vue-cli项目搭建的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
vite多页面配置项目实战
vite官方文档中有关于多页面应用模式如果配置的说明,下面这篇文章主要给大家介绍了关于vite多页面配置的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04
Vue PostCSS的使用介绍
postcss一种对css编译的工具，类似babel对js的处理，postcss只是一个工具，本身不会对css一顿操作，它通过插件实现功能，autoprefixer就是其一
2023-02-02
vue封装axios的两种方法总结
在不同的前端项目中使用相同的axios封装有利于保持一致性,有利于数据之间的传递和处理,本文主要提供两种对axios进行封装的思路,有需要的小伙伴可以参考一下
2023-10-10