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


Posted in Javascript onJanuary 25, 2019

症结(懒癌患者)

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

猜想(狂想曲)

所以我想,可不可以把.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里取出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) {
 // 获取文件变量
 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('')
}

大功告成??! 那么,如何使用呢?

使用(给我小星星?)

安装

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,如有不正确/不足的地方,欢迎指正。

  • 源代码git地址 (本地下载)
  • npm包地址

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
详解使用vuex进行菜单管理
Dec 21 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
命令行批量截图Node脚本示例代码
Jan 25 #Javascript
Node.js 进程平滑离场剖析小结
Jan 24 #Javascript
Vue.js样式动态绑定实现小结
Jan 24 #Javascript
实例讲解JavaScript预编译流程
Jan 24 #Javascript
实例讲解vue源码架构
Jan 24 #Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 #Javascript
JavaScript私有变量实例详解
Jan 24 #Javascript
You might like
php提示undefined index的几种解决方法
2012/05/21 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
python分析apache访问日志脚本分享
2015/02/26 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
总经理职责
2013/12/22 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
Anaconda配置各版本Pytorch的实现
2021/08/07 Python