Vue 展示.md文件的方法详解
作者：心动止于人海。
这篇文章主要介绍了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文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！