让Markdown中的Vue代码运行

起源一定是你看过ElementUi和AntDesignVue等文档，里面的例子和例子的源码通常是同时展示的。这种形式是如何实现的？当然，最笨的办法就是自己写一个使用示例，然后把示例的源码复制粘贴到示例下面。当然这种方式对于后期的维护来说会很麻烦。更合理高效的做法是通过某种形式自动完成复制粘贴的过程。基本原理为webpack写一个loader，将Markdown格式的文档渲染成html；将其中的示例代码包装成一个单文件组件；将整个文档包装成一个单文件组件，将第2步中的示例代码包装成一个文件组件导入进来；利用loader的链式调用特性将这些处理结果传递给vue-loader。实现步骤第一步：将Markdown文件渲染成HTML这一步比较简单。你可以使用markdown-it直接将Markdown格式的文档渲染成HTML，然后用标签包裹起来。加载程序部分代码：constMarkdownIt=require('markdown-it')module.exports=function(mdFileString){constmd=newMarkdownIt({html:true,breaks:true})consthtml=md.render(mdFileString)}第二步：将文档的示例代码单独打包成一个【单文件组件】一般的文档都是用Markdown格式写的，Markdown格式的代码示例格式如下：```html代码示例```根据对于这个规则，我们可以通过常规方法提取代码块：module.exports=function(mdFileString){constcodeReg=newRegExp('```html\n(.|\n)*?\n```','g')constdemoCodes=mdFileString.match(codeReg)}然后将提取出来的代码块内容写入本地文件目录：constfs=require('fs')module.exports=function(mdFileString){constcodeReg=newRegExp('```html\n(.|\n)*?\n```','g')constdemoCodes=mdFileString.match(codeReg)for(letindex=0;index${html}