vue 展示 md文件

安装插件

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

在vue.config.js中配置webpack

module.exports = {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})}
}

在main.js中引入样式文件

// markdown样式
import 'github-markdown-css'
// 代码高亮
import 'highlight.js/styles/github.css'

在vue组件中使用

将md文件作为组件导入，注意：class的值必须包含 markdown-body ，否则样式无法生效！

<template><demo-md class="markdown-body"></demo-md>
</template><script>
// 导入md文件 ，并注册为组件 
import DemoMd from './demo.md';
export default {components: {DemoMd}
}
</script>