代码示例

这里展示了 VitePress 的核心功能代码示例，方便快速查阅和复制。

🎮 在线演练场

在下方编辑器中直接体验 VitePress，无需安装任何环境。

使用说明

• 左侧面板编辑 Markdown 文件，右侧实时预览效果
• 点击 Open in StackBlitz 可在新窗口中打开完整编辑环境
• 支持创建新文件、修改配置、安装依赖等完整操作

⚡ 快速模板

最小化模板

# 创建项目目录
mkdir my-docs && cd my-docs

# 初始化
npm init -y

# 安装 VitePress
npm add -D vitepress

# 创建首页
echo '# Hello VitePress' > index.md

# 启动开发服务器
npx vitepress dev

完整模板（推荐）

# 克隆官方模板
git clone https://github.com/vuejs/vitepress-starter my-docs
cd my-docs

# 安装依赖
npm install

# 启动开发
npm run docs:dev

📋 功能演示

Markdown 语法演示

VitePress 支持丰富的 Markdown 扩展语法：

# 欢迎使用 VitePress

这是一个 **Markdown** 示例文档。

## 功能特性

- ⚡ 极速的热更新
- 🎨 精美的主题
- 📦 开箱即用

## 代码示例

​```javascript
import { createApp } from 'vue'

createApp({
  data() {
    return { message: 'Hello VitePress!' }
  }
}).mount('#app')
​```

> 💡 提示：VitePress 支持所有标准 Markdown 语法！

Frontmatter 配置演示

---
title: 自定义页面标题
description: 页面的 SEO 描述
layout: doc
lastUpdated: true
---

# 页面内容

Frontmatter 可以配置：
- `title` - 页面标题
- `description` - SEO 描述
- `layout` - 页面布局
- `lastUpdated` - 显示更新时间

导航栏配置

// .vitepress/config.ts
export default {
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: '指南', link: '/guide/' },
      { text: 'API', link: '/api/' },
      {
        text: '更多',
        items: [
          { text: 'GitHub', link: 'https://github.com' },
          { text: 'Discord', link: 'https://discord.gg' }
        ]
      }
    ]
  }
}

侧边栏配置

// .vitepress/config.ts
export default {
  themeConfig: {
    sidebar: {
      '/guide/': [
        {
          text: '入门',
          collapsed: true,
          items: [
            { text: '介绍', link: '/guide/introduction' },
            { text: '安装', link: '/guide/installation' },
            { text: '快速开始', link: '/guide/getting-started' }
          ]
        }
      ]
    }
  }
}

自定义容器

::: tip 提示
这是一个提示信息
:::

::: warning 注意
这是一个警告信息
:::

::: danger 危险
这是一个危险警告
:::

::: details 点击展开
隐藏的详细内容
:::

🌐 在线环境

如果你想在真实环境中尝试 VitePress，可以使用以下在线平台：

平台	说明	链接
StackBlitz	即时在线开发环境	打开 →
CodeSandbox	云端开发环境	打开 →
GitHub Codespaces	GitHub 云开发环境	打开 →

🎯 下一步

• 📖 阅读 入门指南
• 🚀 查看 学习路径
• 💡 浏览 实战案例