vue组件文档(.md)中自动导入示例(.vue)
栏目: JavaScript · 发布时间: 5年前
内容简介:在写组件库文档的时候,会把示例代码粘贴到文档里,这样做有一个很恶心的地方:每次组件迭代或修改示例都需要重新修改文档中的代码片段。长年累月,苦不堪言。所以我想,可不可以把.vue文件里的template块和script块取出来,放入对应的.md文件中比如在.md文件中
症结(懒癌患者)
在写组件库文档的时候,会把示例代码粘贴到文档里,这样做有一个很恶心的地方:每次组件迭代或修改示例都需要重新修改文档中的代码片段。长年累月,苦不堪言。
猜想(狂想曲)
所以我想,可不可以把.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.vue template <template> <div>xx</div> </template> // image.vue script <script> ... </script> // index.js var x = 1 ## 参数说明 xxx...
动手(能动手绝不**)
要实现以上功能,需要探索以下几点:
.vue .md .md
如果按照我们写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) { // 获取文件变量 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('') }
大功告成:tada::tada:! 那么,如何使用呢?
使用(给我小星星:star2:)
安装
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'
其他
第一次撸 webpack loader
,如有不正确/不足的地方,欢迎指正。
以上所述就是小编给大家介绍的《vue组件文档(.md)中自动导入示例(.vue)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- ASP.NET Aries 高级开发教程:Excel导入之多表高级导入配置(中)
- 将Excel文件导入数据库(POI+Excel+MySQL+jsp页面导入)第一次优化
- [MySQL]备份和导入
- Android Studio 导入源码
- Python导入订单是否重要
- hive 导入 mysql文本
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。