VuePress Vue Playground 交互演示插件配置

此插件提供 Vue 交互演示支持。

配置

// .vuepress/config.ts
import { mdEnhance } from 'vuepress-plugin-md-enhance';

export default {
  plugins: [
    mdEnhance({
      // 启用 vue 交互演示
      vuePlayground: true,
    }),
  ],
};

// .vuepress/config.js
import { mdEnhance } from 'vuepress-plugin-md-enhance';

export default {
  plugins: [
    mdEnhance({
      // 启用 vue 交互演示
      vuePlayground: true,
    }),
  ],
};

用法

要使用 vue 交互演示，你应该使用一个名为 vue-playground 的容器。

在其中，你可以使用 3 个指令：

@file 文件名 紧跟文件的代码块
@import 紧跟一个自定义“导入映射”的 json 块
@setting 紧跟一个自定义设置的 json 块

你可以查看以下案例以查看更多详细信息。

案例

::: vue-playground Vue 交互演示

@file App.vue

<script setup>
import { ref } from 'vue';

const msg = ref('你好交互演示!');
</script>

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

:::

Code

::: vue-playground Vue 交互演示

@file App.vue

```vue
<script setup>
import { ref } from 'vue';

const msg = ref('你好交互演示!');
</script>

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

:::

::: vue-playground 自定义导入与映射的 Vue 交互演示

@file App.vue

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

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

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

@file Comp.vue

<script setup>
import { useBattery } from '@vueuse/core';
import { ref } from 'vue';

const { charging, level } = useBattery();
</script>

<template>
  <h1>Battery status</h1>
  <p>Charging: {{ charging }}</p>
  <p>Level: {{ level * 100 }}%</p>
</template>

@import

{
  "imports": {
    "@vueuse/core": "https://unpkg.com/@vueuse/core/index.mjs",
    "@vueuse/shared": "https://unpkg.com/@vueuse/shared/index.mjs",
    "vue-demi": "https://unpkg.com/vue-demi/lib/index.mjs"
  }
}

@setting

{
  "showCompileOutput": true
}

:::

Code

::: vue-playground 自定义导入与映射的 Vue 交互演示

@file App.vue

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

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

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

@file Comp.vue

```vue
<script setup>
import { useBattery } from '@vueuse/core';
import { ref } from 'vue';

const { charging, level } = useBattery();
</script>

<template>
  <h1>Battery status</h1>
  <p>Charging: {{ charging }}</p>
  <p>Level: {{ level * 100 }}%</p>
</template>
```

@import

```json
{
  "imports": {
    "@vueuse/core": "https://unpkg.com/@vueuse/core/index.mjs",
    "@vueuse/shared": "https://unpkg.com/@vueuse/shared/index.mjs",
    "vue-demi": "https://unpkg.com/vue-demi/lib/index.mjs"
  }
}
```

@setting

```json
{
  "showCompileOutput": true
}
```

:::