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 相关文章推荐
jquery validation插件表单验证的一个例子
Mar 03 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 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选项与信息函数的使用详解
2013/05/10 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
PHP多文件上传实例
2015/07/09 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
用console.table()调试javascript
2014/09/04 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python中atexit模块的基本使用示例
2015/07/08 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
python操作yaml说明
2020/04/08 Python
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
就业自荐书
2013/12/05 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技