代码引入

单文件导入

输入

@[code](../../.vuepress/vue-previews/demo.vue)

输出

<template>
  <div class="demo-container">
    <h3 style="widht">My name is {{name}}.</h3>
    <p>This is a vue preview demo.</p>
  </div>
</template>

<script setup lang="ts">
import { useInfo } from "./demo.ts";

const { name } = useInfo()
</script>

<style>
.demo-container {
  width: 200px;
}
</style>

vue 组件导入

TIP

主题默认将 /.vuepress/vue-previews 下面的 .vue 组件进行了全局注册,所以需要预览的组件请放在此目录下。

如果我们文档项目存放在工程的子目录,比如 /doc 文件夹下,我们需要设置 themeConfig.vuePreviewsDir./docs/.vuepress/vue-previews

vue 组件预览

输入

@[preview-demo](@/docs/.vuepress/vue-previews/demo.vue)

输出

My name is reco.

This is a vue preview demo.

<template>
  <div class="demo-container">
    <h3 style="widht">My name is {{name}}.</h3>
    <p>This is a vue preview demo.</p>
  </div>
</template>

<script setup lang="ts">
import { useInfo } from "./demo.ts";

const { name } = useInfo()
</script>

<style>
.demo-container {
  width: 200px;
}
</style>
export function useInfo() {
  const name = 'reco'

  return { name }
}

vue 组仅展示代码组

输入

@[preview](@/docs/.vuepress/vue-previews/demo.vue)

输出

<template>
  <div class="demo-container">
    <h3 style="widht">My name is {{name}}.</h3>
    <p>This is a vue preview demo.</p>
  </div>
</template>

<script setup lang="ts">
import { useInfo } from "./demo.ts";

const { name } = useInfo()
</script>

<style>
.demo-container {
  width: 200px;
}
</style>
export function useInfo() {
  const name = 'reco'

  return { name }
}