vue组件文档(.md)中如何自动导入示例(.vue)详解
症结(懒癌患者)
在写组件库文档的时候,会把示例代码粘贴到文档里,这样做有一个很恶心的地方:每次组件迭代或修改示例都需要重新修改文档中的代码片段。长年累月,苦不堪言。
猜想(狂想曲)
所以我想,可不可以把.vue文件里的template块和script块取出来,放入对应的.md文件中
比如在.md文件中 动手(能动手绝不**) 要实现以上功能,需要探索以下几点: 如果按照我们写js的习惯,以下嵌套排列可能更易读 将.md文件转为Vue Componet / html 找到变量位置,塞进对应的.md的指定位置 从.vue里取出template&script 一步一步来吧: 1、将.md文件转为Vue Componet / html 要想在vue中使用.md文件为组件,只需要用loader将md转成Vue Componet即可。 这个过程很简单,以下为loader伪代码 2、找到变量位置,塞进对应的.md的指定位置 1)找到变量位置 使用正则匹配定义的规则,找到被{{:}} 包围的字符串,如上例所示则为‘image.vue"htmlcode">
如若要取一个文件里的多个块,则需多次调用,考虑到我们的组件库场景,默认返回template和script(未使用type参数时), 大功告成"color: #ff0000">使用(给我小星星"htmlcode">
配置 其他 第一次撸webpack loader,如有不正确/不足的地方,欢迎指正。 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。{{:xx.vue"htmlcode">
# xx
## 示例代码
// {{:}} 定义变量规则模版(加个冒号防冲突)
{{:image.vue"htmlcode">
# xx
## 示例代码
// image.vue template
<template>
<div>xx</div>
</template>
// image.vue script
<script>
...
</script>
// index.js
var x = 1
## 参数说明
xxx...
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))
}
const replaceResults = (template, baseDir) => {
const regexp = new RegExp("\\{\\{:([^\\}]+)\\}\\}", "g")
return template.replace(regexp, function(match) {
// 获取文件变量
match = match.substr(3, match.length - 5)
let [loadFile, query=''] = match.split('"utf-8").replace(/[\r\n]*$/, "")
if (path.extname(loadFile) === ".vue") {
let { type } = loaderUtils.parseQuery(`"htmlcode">
const replaceVue = (source, type) => {
const descriptor = templateCompiler.parseComponent(source)
const lang = {
template: 'html',
script: 'javascript' //,
// style: 'css'
}
return lang[type] && `
\`\`\`${lang[type]}
${descriptor[type].content}
\`\`\`
`
}
对上面代码进行优化,一次性从.vue中取出多个块
// replaceVue(source, [type])
const replaceVue = (source, types = ['template', 'script']) => {
const descriptor = templateCompiler.parseComponent(source)
const lang = {
template: 'html',
script: 'javascript' //,
// style: 'css'
}
return types.map(type => lang[type] && `
\`\`\`${lang[type]}
${descriptor[type].content}
\`\`\`
`).join('')
}
npm i vue-markd-loader -D
rules: [{
test: /\.md$/,
use: [
'vue-loader',
{
loader: 'vue-markd-loader',
options: {
replaceFiles: true , // 默认true, 是否将文件填充进md
wrapper:true // 默认true,默认输出Vue Component ,false 时输出html片段
}
}
]
}]
// main.js
import 'highlight.js/styles/github.css' // 可以使用任意喜欢的主题哟
import 'github-markdown-css'
下一篇:命令行批量截图Node脚本示例代码