vue 加载展示md文件(markdown语法 .md后缀的文件)
目录1. 安装依赖包2. 在vue.config.js中添加配置3. 导入样式4. 导入md文件5. 注册为组件6. 在页面中使用最终效果1. 安装依赖包npm i vue-markdown-loader -Dnpm ivue-loader vue-template-compiler -Dnpm i github-markdown-css -Dnpm i highlight.js -D若报错Vue
·
目录
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,则安装与 vue-template-compiler 版本一致的vue即可
npm install vue@2.6.12 --save
2. 在vue.config.js中添加配置
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. 导入样式
在 .vue 文件中局部导入,或在 main.js 中全局导入
import 'github-markdown-css'
import 'highlight.js/styles/github.css'
4. 导入md文件
import Swagger from './md/Swagger.md'
5. 注册为组件
components: {
Swagger
},
6. 在页面中使用
此处 class的值必须包含 markdown-body ,否则样式无法生效!
<Swagger class="markdown-body"/>
最终效果
更多推荐
已为社区贡献27条内容
所有评论(0)