这篇文章主要给大家介绍了关于vue组件文档（.md）中如何自动导入示例（.vue）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
症结（懒癌患者）
在写组件库文档的时候，会把示例代码粘贴到文档里，这样做有一个很恶心的地方：每次组件迭代或修改示例都需要重新修改文档中的代码片段。长年累月，苦不堪言。
猜想（狂想曲）
所以我想，可不可以把.vue文件里的template块和script块取出来，放入对应的.md文件中
比如在.md文件中 {{:xx.vue?type=(template|script)}} 便替换示例中对应的template|script块
# xx ## 示例代码 // {{:}} 定义变量规则模版（加个冒号防冲突） {{:image.vue?type=template}} // 对<em>本文来源[email protected]搞@^&代*@码2网</em>应.vue 的template {{:image.vue?type=script}} // 对应.vue 的template {{:index.js}} // 对应index.js ## 参数说明 xxx...
output
# xx ## 示例代码 // image.vue template <div>xx</div> // image.vue 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 => ` <section /> ` 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) { // 获取文件变量 match = match.substr(3, match.length - 5) let [loadFile, query=''] = match.split('?') // 读取文件内容 const source = fs.readFileSync(path.join(baseDir, loadFile), "utf-8").replace(/[\r\n]*$/, "") if (path.extname(loadFile) === ".vue") { let { type } = loaderUtils.parseQuery(`?${query}`) return replaceVue(source, type) // 根据type提取.vue里的不同块 } return source // 非.vue直接返回文件内容 }) };
3、从.vue里取出template&script
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} \`\`\` ` }
如若要取一个文件里的多个块，则需多次调用，考虑到我们的组件库场景，默认返回template和script(未使用type参数时),
对上面代码进行优化，一次性从.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('') }
大功告成
以上就是vue组件文档（.md）中如何自动导入示例（.vue）详解的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：vue组件文档（.md）中如何自动导入示例（.vue）详解
