组件示例展示

本页面展示 VitePress 支持的各种内置组件和自定义样式，方便您在文档中直接使用。

---

自定义容器

VitePress 提供了四种自定义容器样式，用于不同场景的提示信息：

信息提示

这是一条普通的信息提示，用于展示一般性说明内容。

小技巧

这是一个实用的小技巧，帮助您更好地完成任务。

警告

这是一个需要注意的警告信息，请仔细阅读。

危险操作

这是一个危险操作警告，执行前请确认后果！

备忘录

这是一个备忘录类型的提示，适合记录重要事项。

重要通知

这是一个重要通知，务必认真阅读。

注意事项

这是一个需要注意的事项，请谨慎处理。

---

徽章 (Badges)

在行内文本中使用徽章来标记状态或分类：

• 基础徽章 default
• 信息徽章 新功能
• 警告徽章 已废弃
• 危险徽章 v3.0 移除
• 自定义版本号 v1.5.2

---

代码块

行内代码

使用 console.log() 进行调试，或通过 npm install 安装依赖。

代码块展示

// 响应式状态管理
import { reactive, computed } from 'vue'

const state = reactive({
  count: 0,
  name: 'VitePress'
})

const doubled = computed(() => state.count * 2)

function increment() {
  state.count++
  console.log(`Count: ${state.count}, Doubled: ${doubled.value}`)
}

# Python 示例
class DataProcessor:
    """数据处理器"""

    def __init__(self, data: list[dict]):
        self.data = data
        self._cache = {}

    def filter_by(self, key: str, value):
        return [item for item in self.data if item.get(key) == value]

    def transform(self, func):
        self.data = [func(item) for item in self.data]
        return self

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

代码组

Vue 3

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newVal, oldVal) => {
  console.log(`Count changed: ${oldVal} → ${newVal}`)
})

TypeScript

import { ref, watch } from 'vue'

const count = ref<number>(0)

watch(count, (newVal: number, oldVal: number): void => {
  console.log(`Count changed: ${oldVal} → ${newVal}`)
})

---

时间线

2024年项目进展

• 2024-01-15 — 项目启动，完成需求调研
• 2024-03-20 — 核心功能开发完成
• 2024-06-01 — 发布 v1.0 正式版
• 2024-09-10 — 用户突破 1000 人
• 2024-12-25 — 发布 v2.0，新增多项功能

---

图表 (Mermaid)

流程图

时序图

甘特图

---

表格

技术栈	说明	状态
Vue 3	前端框架	✅ 稳定
VitePress	文档站点生成器	✅ 稳定
TypeScript	类型系统	✅ 推荐
Pinia	状态管理	✅ 推荐
Vitest	单元测试	🔶 部分支持

---

折叠面板

点击展开查看代码

export function debounce(fn, delay = 300) {
  let timer = null
  return function (...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

点击查看配置示例

// vitepress/config.mjs
export default {
  title: '我的文档',
  description: '使用 VitePress 构建',
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: '指南', link: '/guide/' }
    ],
    sidebar: [
      {
        text: '指南',
        items: [
          { text: '快速开始', link: '/guide/getting-started' },
          { text: '配置', link: '/guide/configuration' }
        ]
      }
    ]
  }
}

---

链接与图片

• VitePress 官方文档
• Vue.js 官方文档
• Markdown 语法参考

---