md解密 vue_vue组件文档（.md）中如何自动导入示例（.vue）详解

症结(懒癌患者)

在写组件库文档的时候，会把示例代码粘贴到文档里，这样做有一个很恶心的地方：每次组件迭代或修改示例都需要重新修改文档中的代码片段。长年累月，苦不堪言。

猜想(狂想曲)

所以我想，可不可以把.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

xx

// image.vue 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 => `

export default {

created() {

this.content = content

}

};

`

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,如有不正确/不足的地方，欢迎指正。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。