跳至主要內容

Playground 插件

Zhao Bin原创themeplaygroundvuepressthememarkdownplayground

Playground 插件

让你的 VuePress 站点中的 Markdown 文件支持 Vue SFC Playgroundopen in new window 类似的代码案例。

注意

playground 插件已经提交 PR,不需要自己实现,使用 vuepress-theme-hope 主题内置即可,这里仅保留记录。

配置

// cunstomConfig.ts
export const customConfig: CustomConfig = {
  mdEnhance: {
    // playground: true,
    playground: {
      base: 'https://vue-sfc-playground.vercel.app/',
      option: {
        showOutput: true,
      },
    },
  },
}



 
 
 
 
 
 
 


  • playground 设为 true 时,启用默认的 Playground 配置,即 Vue3 官方的 Playground。
  • playground 设为 对象时,则使用配置项指定的内容来显示 Playground。
  • 另外,playground 还支持个别设置 baseimports,稍后为你介绍。

语法

为了简单方便,你只需配合 CodeGroupCodeGroupItem 即可。
每一个 CodeGroupItem 为一个 .vue 文件。

为了简单方便,你只需配合 code-tabs@tab 即可。
每一个 @tab 为一个 .vue.js 文件。

使用 importssettings 可为每个 Playground 自定义配置。

使用方法如下:

使用主题默认配置

:::: playground Playground demo
::: code-tabs
@tab App.vue

```vue
<template>
  <div>App</div>
</template>
```

@tab Comp.vue

```vue
<template>
  <div>Comp</div>
</template>
```

:::
::::

使用个别配置

使用个别配置的 baseimports,以 Element Plus 为例。

:::: playground Customize playground demo
::: code-tabs
@tab App.vue

```vue
<template>
  <div>App</div>
</template>
```

@tab Comp.vue

```vue
<template>
  <div>Comp</div>
</template>
```

:::

::: imports import_map.json

```json
{
  "imports": {
    "vue": "https://sfc.vuejs.org/vue.runtime.esm-browser.js"
  }
}
```

:::

::: settings

```json
{
  "base": "https://element-plus.run/"
}
```

:::

::::

案例

使用主题默认配置的案例

:::: playground Playground demo
::: code-tabs
@tab App.vue

```vue
<script setup>
import { ref } from 'vue'
import Comp from './Comp.vue'

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
  <div>
    <Comp />
  </div>
</template>
```

@tab Comp.vue

```vue
<template>
  <div>Comp</div>
</template>
```

:::
::::

使用个别配置的案例

使用个别配置的 baseimports

:::: playground Element-Plus demo
::: code-tabs
@tab App.vue

```vue
<script lang="ts" setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>

<template>
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary"> Primary </el-button>
    <el-button type="success"> Success </el-button>
    <el-button type="info"> Info </el-button>
    <el-button type="warning"> Warning </el-button>
    <el-button type="danger"> Danger </el-button>
    <el-button>中文</el-button>
  </el-row>
  <el-row>
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="info" :icon="Message" circle />
    <el-button type="warning" :icon="Star" circle />
    <el-button type="danger" :icon="Delete" circle />
  </el-row>
</template>
```

:::

::: imports import-map.json

```json
{
  "imports": {
    "a": "b"
  }
}
```

:::

::: settings

```json
{
  "base": "https://element-plus.run/"
}
```

:::

::::