01. Vitepress 简介

VitePress 是基于 Vite 的静态网站生成器，专注于文档编写。

一、什么是 VitePress

VitePress 是 VuePress 的继任者，使用 Vite 作为构建工具，提供更快的开发和构建速度。

特点

• ⚡️ 使用 Vite，极速热更新
• 📝 优秀的内容体验
• 🌐 开箱即用的主题
• 🔌 插件系统支持
• 📦 按需加载路由

---

二、创建 VitePress 项目

1. 初始化项目

# 创建目录
mkdir my-vitepress-site
cd my-vitepress-site

# 安装依赖
npm init -y
npm install vitepress -D

# 初始化配置
npx vitepress init

2. 目录结构

my-vitepress-site/
├── docs/
│   ├── .vitepress/
│   │   └── config.ts    # 配置文件
│   ├── index.md         # 首页
│   └── guide/           # 文档目录
│       └── intro.md
└── package.json

---

三、配置文件

// docs/.vitepress/config.ts
import { defineConfig } from "vitepress";

export default defineConfig({
    title: "我的文档",
    description: "基于 VitePress 的文档",

    themeConfig: {
        nav: [
            { text: '首页', link: '/' },
            { text: '指南', link: '/guide/intro' }
        ],

        sidebar: {
            '/guide/': [
                { text: '介绍', link: '/guide/intro' }
            ]
        }
    }
});

---

四、Markdown 扩展

1. 代码块高亮

\`\`\`javascript
console.log("Hello, VitePress!");
\`\`\`

2. 语法高亮

\`\`\`vue
<template>
    <div>{{ message }}</div>
</template>
\`\`\`

---

总结

VitePress 是构建文档网站的优秀选择，快速、简单、易用。