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 中关于CSS操作部分使用说明
Jun 10 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
js+h5 canvas实现图片验证码
Oct 11 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
python并发和异步编程实例
2018/11/15 Python
微信小程序python用户认证的实现
2019/07/29 Python
python中下标和切片的使用方法解析
2019/08/27 Python
高三自我鉴定
2013/10/23 职场文书
项目经理岗位职责
2013/11/11 职场文书
护士实习鉴定范文
2013/12/22 职场文书
英文请假条
2014/04/11 职场文书
文明城市标语
2014/06/16 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
2014年教研员工作总结
2014/12/23 职场文书
青岛海底世界导游词
2015/02/11 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript