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 相关文章推荐
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
js操作iframe父子窗体示例
May 22 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 Javascript
前端vue如何使用高德地图
Nov 05 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 进度条实现代码
2009/03/10 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
PDO::inTransaction讲解
2019/01/28 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
wordpress之js库集合研究介绍
2007/08/17 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
Angular路由简单学习
2016/12/26 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
python实现巡检系统(solaris)示例
2014/04/02 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
在python中使用nohup命令说明
2020/04/16 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
UNIX文件类型
2013/08/29 面试题
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技