Vuepress v2 插件

简介

1. 使用自定义 ::: demo 语法，写一遍示例即可自动生成组件示例与代码示例；
2. 支持code在线编辑,包括编辑含import的代码，支持在编辑页额外import其它的文件 （仅开发模式可以）

安装

1npm i vuepress2-plugin-demo-block-edit -D

使用

在 .vuepress/config.ts 添加此插件:

1import v2 from 'vuepress2-plugin-demo-block-edit'
2
3export default = {
4  // ...
5  plugins: [v2()]
6}

开发

在进行完以上操作后，您即可使用本插件所有功能进行文档开发

1. 在.vuepress 新建目录component和examples
2. 在component下新建你的md文档，eg: button.md 在.md 文件中使用以下语法( :::demo ::: 中间包裹的是被渲染组件在examples下的路径)

1::: demo
2
3button/basic
4
5:::

3. 在examples下新建button文件夹，并在文件夹下新建basic.vue 内容如下

1<script setup lang="ts">
2import { ElButton } from 'element-plus'
3const buttons = [
4    { type: '', text: 'plain' },
5    { type: 'primary', text: 'primary' },
6    { type: 'success', text: 'success' },
7    { type: 'info', text: 'info' },
8    { type: 'warning', text: 'warning' },
9    { type: 'danger', text: 'danger' },
10]
11</script>
12
13<template>
14    <p>Basic text button</p>
15    <div class="flex justify-space-between mb-4 flex-wrap gap-4">
16        <el-button v-for="button in buttons" :key="button.text" :type="button.type" text>
17            {{ button.text }}
18        </el-button>
19    </div>
20
21    <p>Background color always on</p>
22    <div class="flex justify-space-between mb-4 flex-wrap gap-4">
23        <el-button v-for="button in buttons" :key="button.text" :type="button.type" text bg>
24            {{ button.text }}
25        </el-button>
26    </div>
27
28    <p>Disabled text button</p>
29    <div class="flex justify-space-between flex-wrap gap-4">
30        <el-button v-for="button in buttons" :key="button.text" :type="button.type" text disabled>
31            {{ button.text
32            }}
33        </el-button>
34    </div>
35</template>
36

效果

预览

在线编辑

致谢

1. 本插件代码参考 element-plus

向以上人员致谢

许可

MIT License

源码地址

https://github.com/wangziweng7890/monorepo/tree/master/packages/plugins/vuepress2-plugin-demo-block-edit