Vitepress 文档站点

Vitepress 是基于 Vite 的静态站点生成器，专为技术文档设计。

Vitepress 特点

安装 Vitepress

npm add -D vitepress

创建文档结构

docs/
├── index.md          # 首页
├── guide/
│   ├── index.md      # 指南首页
│   └ getting-started.md
│   └ routing.md
└── .vitepress/
    └ config.js       # 配置文件

基础配置

// .vitepress/config.js
export default {
  title: 'My Docs',
  description: 'Documentation for my project',
  themeConfig: {
    nav: [
      { text: 'Guide', link: '/guide/' },
      { text: 'API', link: '/api/' }
    ],
    sidebar: {
      '/guide/': [
        {
          text: 'Guide',
          items: [
            { text: 'Getting Started', link: '/guide/getting-started' },
            { text: 'Routing', link: '/guide/routing' }
          ]
        }
      ]
    }
  }
}

Markdown 文档

# Getting Started

Welcome to the guide!

## Installation

```bash
npm install my-package
\```

## Features

- Feature 1
- Feature 2

嵌入 Vue 组件

# Interactive Docs

<CustomComponent />

<script setup>
import CustomComponent from './CustomComponent.vue'
</script>

注意：Vitepress 支持在 Markdown 中使用 Vue 组件。

构建命令

# 开发模式
vitepress dev docs

# 构建产物
vitepress build docs

# 预览产物
vitepress preview docs

配置 package.json

{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  }
}

Vitepress vs 其他工具

要点总结

• Vitepress 基于 Vite 构建
• Markdown + Vue 组件支持
• 配置文件 .vitepress/config.js
• 构建输出静态站点