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 = 1
index.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>