vue-cli3 中直接将 .md 文件转为 html。我用到的是 webpack 的 vue-markdown-loader,这个 loader 可以直接将 .md 文件转换为 vue 的组件,然后可以直接在页面中使用,非常的方便。

使用方法

安装

1
2
3
4
5
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

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// vue.config.js 如果没有就在项目根目录新建
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
})
}
}

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<!-- class markdown-body 必须加,否则标签样式会出现问题 -->
<div class="markdown-body">
<markdown />
</div>
</template>

<script>
// 引入 markdown 文件,引入后是一个组件,需要在 components 中注册
import markdown from '@/assets/ApiDocument.md'
// 代码高亮
import 'highlight.js/styles/github.css'
// 其他元素使用 github 的样式
import 'github-markdown-css'
export default {
components: {
markdown
},
}
</script>