如何优雅的使用Vuepress编写组件示例（下）

前言✍️

• 最近在搭自己的组件库，关于文档用的是Vuepress
• 官网在文档说明展示组件示例的方法有很多种，但种种都不合心意
• 通过查阅网上的资料和Element的源码找出了我认为的一种最优解，借此机会分享一下
• 该篇主要是具体的实现，如果想看分析的可以看到如何优雅的使用Vuepress编写组件示例（上）

实际效果✔️

先把最后的成品发出来给大家看看

李性分析🙋‍♂️

在上篇中分析归纳了一下具体的步骤(如下)，接下来我们就来具体的实现一下

• 第一步构建一个通用组件用于接收代码块来展示demo并且统一样式
• 第二步设定一个Markdown自定义容器来编写demo代码
• 第三步把自定义容器转化成之前构建的通用组件，这样就可以在md使用自定义容器来实现上文效果
• 第四步扩展markdown渲染方法使我们输入的代码块可以输出内容为符合Vue Template语法的代码块
• 第五步变成了vue代码后交由Vuepress的vue-loader处理编译为文档

干就完了👊

构建组件📦

docs
├─ .vuepress
│  ├─ components
│  │  └─ demoBlock.vue
│  ├─ config.js
│  └─ enhanceApp.js
└─ component
   └─ basic
      └─ button.md

• 因为Vuepress可以自动识别components里面的组件并注册所以我们在里面建一个通用组件demoBlock用于展示demo
• 参考了Element的通用组件后观察到这个组件主要由三部分组成：组件示例、描述、组件代码块

/* demoBlock.vue */
<template>
  <div class="block">
    <div class="demo-content">
      <!-- 插入组件 -->
      <slot name="demo"></slot>
    </div>
    <div class="meta" ref="meta">
      <div class="description">
        <!-- 插入描述信息 -->
        <slot name="description"></slot>
      </div>
      <div class="code-content">
        <!-- 插入代码块 -->
        <slot name="source"></slot>
      </div>
    </div>
  </div>
</template>

• 以上是一个简陋版的通用组件加上了简陋的样式，里面包含了三个插槽分别是组件示例、描述、组件代码块，这样我们就可以通过在md转vue的时候根据特别的插槽来组装我们的组件示例

创建自定义容器🧺

对于自定义组件我们可以使用markdown-it-container 参考官网构建

/* containers.js */
const mdContainer = require('markdown-it-container');
module.exports =md => {
   
    //将markdown-it-container插件加载到当前的解析器实例中
    md.use(mdContainer,