目录

1. 安装依赖包

 2. 在vue.config.js中添加配置

3. 导入样式

 4. 导入md文件

 5. 注册为组件

 6. 在页面中使用

最终效果

1. 安装依赖包

npm i vue-markdown-loader -D
npm i vue-loader vue-template-compiler -D
npm i github-markdown-css -D
npm i highlight.js -D

 若报错 Vue packages version mismatch&＃xff0c;则安装与 vue-template-compiler 版本一致的vue即可

npm install vue&＃64;2.6.12 --save

 2. 在vue.config.js中添加配置

chainWebpack: config &＃61;> {config.module.rule(&＃39;md&＃39;).test(/\.md/).use(&＃39;vue-loader&＃39;).loader(&＃39;vue-loader&＃39;).end().use(&＃39;vue-markdown-loader&＃39;).loader(&＃39;vue-markdown-loader/lib/markdown-compiler&＃39;).options({raw: true})}

3. 导入样式

在 .vue 文件中局部导入&＃xff0c;或在 main.js 中全局导入

import &＃39;github-markdown-css&＃39;import &＃39;highlight.js/styles/github.css&＃39;

 4. 导入md文件

import Swagger from &＃39;./md/Swagger.md&＃39;

 5. 注册为组件

components: {Swagger
},

 6. 在页面中使用

 此处 class的值必须包含 markdown-body &＃xff0c;否则样式无法生效&＃xff01;

最终效果