asp.net 安装element ui_Vue组件库系列三：打造属于自己的 UI 库文档（新版本的方案）...

上一章介绍了element-ui老版本中md文档构建过程，如果大家认真看了，就会发现在.md文档中还是有一些重复的部分，怎样使文档看着更加简洁，操作更加方便，饿了么团队下了很大的力气做了探索，现在我们一起分享这个成果

我们先来看看input.md新文档是怎么写的

对比老版本的input.md文档，我们发现少了最开始的，但是我们操作页面，发现JavaScript交互仍然是正常的，页面底部也未报错，说明原本模板里面的JavaScript被抽出来”共享“了

接下来，我们逐步去分析element是如何实现这个创举.

1、添加依赖

这一步和之前没多大的区别

yarn add markdown-it markdown-it-container markdown-it-chain markdown-it-anchor transliteration @vue/component-compiler-utils vue-template-compiler -D

2、配置loader

查看build/webpack.demo.js下面关于md格式的解析器配置，可以发现新版本用了一个自定义的md-loader

3、分析md-loader

打开md-loader/index.js我们发现用到了几个工具函数

具体方法如下：

前面两个是用来提取script和style标签里面的内容，这个很厉害哦，这样做是为啥，请继续接着看

genInlineComponentText这个函数就跟厉害了，它将一个模板template和模板对应的script转成一个内联组件并返回。也就是说element将:::demo ```html 例子 ``` :::中间的例子转成一个个内联component注入到整个页面中，这样就完美的实现了JavaScript交互。是不是很机智

接下来，我们看看config.js里面的内容

发现和老版本里面一样，都是用了markdown-it-chain，markdown-it-anchor，前者是markdown-it的链式操作，后者是生成锚点，如下图圈起来的部分

transliteration这个函数是用来将中文标题翻译成拼音，并用”-“连接符连接。如“npm 安装

”翻译成“npm-an-zhuang”

然后，我们看看container.js里面具体干了啥

惊不惊喜，意不意外，还是用到了markdown-it-container解析md文档内容。validate表示检测以"::: demo"开始的都符合条件，当我们写:::demo :::这样的语法时才会进入自定义渲染方法。render里面用到了一个占位符，这个将在后面介绍其作用，render方法主要讲md文档包裹一层我们自定义的组件，md文档被当做slot传入

接下来，我们看看fence.js做了啥

好像文档注释已经解释了，覆盖默认的markdown-it fence渲染规则，这段代码主要高亮显示md里面的代码(还需要highlight.js的css样式文件支持)

最后，我们看一下index.js是怎么将这几部分串起来的

总的来看，index.js返回的是一个function，然后我们看到在container.js中定义的