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

查看所有标签

猜你喜欢:

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

Data Structures and Algorithms

Data Structures and Algorithms

Alfred V. Aho、Jeffrey D. Ullman、John E. Hopcroft / Addison Wesley / 1983-1-11 / USD 74.20

The authors' treatment of data structures in Data Structures and Algorithms is unified by an informal notion of "abstract data types," allowing readers to compare different implementations of the same......一起来看看 《Data Structures and Algorithms》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器