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

2023-08-30 10:09:04 69

症结（懒癌患者）

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

猜想（狂想曲）

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

比如在.md文件中{{:xx.vue?type=(template|script)}}便替换示例中对应的template|script块

#xx

##示例代码

//{{:}}定义变量规则模版（加个冒号防冲突）
{{:image.vue?type=template}}//对应.vue的template

{{:image.vue?type=script}}//对应.vue的template

{{:index.js}}//对应index.js

##参数说明

xxx...

output

#xx

##示例代码


//image.vuetemplate


//image.vuescript


//index.js

varx=1

##参数说明

xxx...

动手（能动手绝不**）

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

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

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

将.md文件转为VueComponet/html

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

从.vue里取出template&script

一步一步来吧：

1、将.md文件转为VueComponet/html

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

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

constwrapper=content=>`


`
module.exports=function(source){
//markdown编译用的markdown-it
returnwrapper(newMarkdownIt().render(source))
}

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

1)找到变量位置

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

2)读取文件

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

constreplaceResults=(template,baseDir)=>{
constregexp=newRegExp("\\{\\{:([^\\}]+)\\}\\}","g")
returntemplate.replace(regexp,function(match){
//获取文件变量
match=match.substr(3,match.length-5)
let[loadFile,query='']=match.split('?')
//读取文件内容
constsource=fs.readFileSync(path.join(baseDir,loadFile),"utf-8").replace(/[\r\n]*$/,"")
if(path.extname(loadFile)===".vue"){
let{type}=loaderUtils.parseQuery(`?${query}`)
returnreplaceVue(source,type)//根据type提取.vue里的不同块
}
returnsource//非.vue直接返回文件内容
})
};

3、从.vue里取出template&script

constreplaceVue=(source,type)=>{
constdescriptor=templateCompiler.parseComponent(source)
constlang={
template:'html',
script:'javascript'//,
//style:'css'
}
returnlang[type]&&`
\`\`\`${lang[type]}
${descriptor[type].content}
\`\`\`
`
}

如若要取一个文件里的多个块，则需多次调用，考虑到我们的组件库场景，默认返回template和script(未使用type参数时),
对上面代码进行优化，一次性从.vue中取出多个块

//replaceVue(source,[type])
constreplaceVue=(source,types=['template','script'])=>{
constdescriptor=templateCompiler.parseComponent(source)
constlang={
template:'html',
script:'javascript'//,
//style:'css'
}
returntypes.map(type=>lang[type]&&`
\`\`\`${lang[type]}
${descriptor[type].content}
\`\`\`
`).join('')
}

大功告成

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

热门推荐

随机推荐