让您的VitePress Demo演示功能更专业

2024-02-22 19:06:25

前言

VitePress凭借着Vite的秒级启动速度、markdown-it的强大扩展能力、天然支持Vue3在文档圈迅速流行开来，使用VitePress做Vue3组件库文档也已经非比寻常，使用VitePress不仅能加快项目的迭代速度，还能让文档更易于维护。

VitePress自带的Demo演示功能相对简单，无法满足一些复杂的演示场景，本文将分享如何使用VitePress来构建更专业的Demo演示功能，让您的组件库文档更具交互性和实用性。

构建Demo演示功能的步骤

1. 安装必要的依赖

pnpm install -D vitepress-plugin-demo

2. 在`.vitepress/config.js`中添加插件

module.exports = {
  plugins: [
    'vitepress-plugin-demo',
  ],
}

3. 在`.md`文件中使用Demo组件

<Demo src="./Demo.vue" />

4. 创建Demo组件

<template>
  <div>
    <button @click="handleClick">点击我</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    handleClick() {
      this.message = '你点击了我！'
    }
  }
}
</script>

5. 预览文档

pnpm run dev

Demo演示功能的进阶用法

1. 使用`v-model`双向绑定数据

<template>
  <div>
    <input v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

2. 使用`props`传递数据

<template>
  <div>
    <Demo :message="message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message'],
}
</script>

3. 使用`ref`获取组件实例

<template>
  <div>
    <button @click="handleClick">点击我</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    handleClick() {
      this.$refs.demo.handleClick()
    }
  }
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    handleClick() {
      this.message = '你点击了我！'
    }
  }
}
</script>