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 文件为组件,只需要用 loadermd 转成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)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

CSS精粹

CSS精粹

Rachel Andrew / 曹明伦 / 人民邮电出版社 / 2007-10 / 39.00元

本书采用问答的形式,为CSS使用过程中一些有价值的经典问题提供了精彩的实践解决方案。本书内容包括文本样式、CSS图像、导航、表格数据、注册表和用户界面、浏览器和设置支持、CSS定位和布局以及未来相关技术。 本书的目标读者是每一个需要使作CSS的Web设计人员和开发人员。本书通过经典的问题和精彩的解答将理论融于实践,使每一个带着问题阅读本书的读者都能找到自己满意的答案。一起来看看 《CSS精粹》 这本书的介绍吧!

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具