跳至主要內容

Sandpack 插件

Zhao Bin原创themeplaygroundvuepressthememarkdownsandpackcodesandboxplayground

Sandpack 插件

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

缘由

手头的项目刚刚收尾,看知乎一个 React 和 Vue 撕逼问题时,里面提到了最新的 React 的一些新特性,也附上了 React 新的官网 react.devopen in new window . 出于好奇点了进去,然后看到了官网的可交互示例,觉得不错,然后看了下源代码,发现是使用的 sandpack-react
看了下 sandpack 官网open in new window,感觉功能挺强大的,集成到 vuepress 里做代码演示很不错。

然后搜了下关键字 sandpack vuepress,找到了 vitepress-plugin-sandpackopen in new window,进而找到了 sandpack-vue3,再次表示感谢。

您也可以直接使用 vitepress-plugin-sandpackopen in new window

注意

截止到目前(2023/9/5),代码提及到 feat/sandpck 分支,暂未合并到 main 分支,功能和配置可能会有变动。

配置

// cunstomConfig.ts
export const customConfig: CustomConfig = {
  mdEnhance: {
    sandpack: true,
  },
}



 


使用

要使用交互演示,你应该使用一个名为 sandpack#template 的容器。

在其中,你可以使用 3 个指令:

  • @file FullPathFile 紧跟文件的代码块,同时也支持文件选项,例如:@file FullPathFile [active readOnly hidden]
  • @options 紧跟一个自定义 "options" 的 javascript 代码块
  • @setup 紧跟一个自定义 "customSetup" 的 javascript 代码块

示例

::: sandpack#vue 带自定义设置的 Vue 示例

@file /src/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 /src/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>
```

@options

```js
{
  activeFile: "/src/Comp.vue",
}
```

@setup

```js
{
  dependencies: {
    "@vueuse/core": "latest",
    "@vueuse/shared": "latest",
    "vue-demi": "latest",
  }
}
```

:::

更多内容详见 Hope 网站介绍,本文仅做一个简单记录。