前言✍️
- 最近在搭自己的组件库,关于文档用的是
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,