vue组件文档（.md）中如何自动导入示例（.vue）详解

症结（懒癌患者）

在写组件库文档的时候，会把示例代码粘贴到文档里，这样做有一个很恶心的地方：每次组件迭代或修改示例都需要重新修改文档中的代码片段。长年累月，苦不堪言。

猜想（狂想曲）

所以我想，可不可以把.vue文件里的template块和script块取出来，放入对应的.md文件中

比如在.md文件中

{{:xx.vue?type=(template|script)}} 

# xx
## 示例代码
// {{:}} 定义变量规则模版（加个冒号防冲突）
{{:image.vue?type=template}} // 对应.vue 的template
{{:image.vue?type=script}} // 对应.vue 的template
{{:index.js}} // 对应index.js
## 参数说明
xxx...

output

# xx
## 示例代码
// image.vue template
<template>
 <div>xx</div>
</template>
// image.vue script
<script>
 ...
</script>
// index.js
var x = 1
## 参数说明
xxx...

动手（能动手绝不**）

要实现以上功能，需要探索以下几点：

从.vue里取出template&script
塞进对应的.md的变量位置
将.md文件转为Vue Componet / html

如果按照我们写js的习惯，以下嵌套排列可能更易读

将.md文件转为Vue Componet / html

找到变量位置，塞进对应的.md的指定位置

从.vue里取出template&script

一步一步来吧：

1、将.md文件转为Vue Componet / html

要想在vue中使用.md文件为组件，只需要用loader将md转成Vue Componet即可。

这个过程很简单,以下为loader伪代码

const wrapper = content => `
<template>
 <section v-html="content" v-once />
</template>
<script>
export default {
 created() {
 this.content = content
 }
};
</script>
`
module.exports = function(source) {
 // markdown 编译用的 markdown-it
 return wrapper(new MarkdownIt().render(source))
}

2、找到变量位置，塞进对应的.md的指定位置

1)找到变量位置

使用正则匹配定义的规则，找到被{{:}} 包围的字符串，如上例所示则为‘image.vue?type=template’

2)读取文件

如果是其他.js、.html等普通文件，直接使用fs.readFileSync读取替换即可，因是.vue,我们希望传入type来获取不同的块（template、script等）

const replaceResults = (template, baseDir) => {
 const regexp = new RegExp("{{:([^}]+)}}", "g")
 return template.replace(regexp, function(match) {								 
 1/2    1 2 下一页 尾页