Vue Markd Loader 是一个 webpack 的 loader，将markdown(.md)文件转换为Vue Component 或 html 片段
npm i vue-markd-loader -D
// *.md
# 一级标题
vue component
// wrapper:true
<template>
<section v-html="content" v-once />
</template>
<script>
export default {
created() {
this.content = '<h1>一级标题</h1>';
}
};
</script>html
// wrapper:false
<h1>一级标题</h1>除此之外，Vue Markd Loader 还提供了其他特性：
index.js
var x = 1index.md
{{:index.js}}output
// index.md
var x = 1// webpack config
module: {
rules: [{
test: /\.md$/,
use: [
'vue-loader',
'vue-markd-loader'
]
}]
}// main.js
import 'highlight.js/styles/github.css'
import 'github-markdown-css'type: Boolean
default:false
若要在.md里自动替换文件内容,.md里可以直接写文件路径（路径base为项目根目录）替换内容，语法如下：
{{:PATH.(js|css|html|...)}}
举个例子：
// index.js
var x = 1// index.md
{{:index.js}}output
// index.md
var x = 1
则需要配置replaceFiles选项
rules: [{
test: /\.md$/,
use: [
'vue-loader',
{
loader: 'vue-markd-loader',
options: {
replaceFiles: true // 这里！！
}
}
]
}]
对于.vue，默认分别输出：模版+js，对于写组件文档时非常有效，再也不用复制粘贴示例代码到文档上去啦，更新示例也无需手动维护文档，就问棒不棒？！
// 以图片组件为例 ,语法为 {{:PATH}}
{{:examples/views/image.vue}} // 加载 模版+js
{{:examples/views/image.vue?type=template}} // 只加载模版部分
{{:examples/views/image.vue?type=script}} // 只加载js部分type: Boolean
default:true
例如：
// index.md
# 一级标题
output
// wrapper:true
<template>
<section v-html="content" v-once />
</template>
<script>
export default {
created() {
this.content = '<h1>一级标题</h1>';
}
};
</script>// wrapper:false
<h1>一级标题</h1>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent