Skip to content

VitePress 搭建过程

"拉了么"项目 Wiki 的详细搭建步骤


为什么选择 VitePress?

待补充内容

请在这里说明为什么选择 VitePress:

  • 对比了哪些其他方案(GitBook、Notion、Docusaurus 等)
  • VitePress 的哪些特点吸引你
  • 团队的技术背景是否适合使用 VitePress

🚀 搭建步骤

步骤 1:初始化

bash
# 在项目根目录下创建 wiki 目录
cd lamo-project
mkdir wiki
cd wiki

# 初始化 package.json
pnpm init

# 安装 VitePress
pnpm add -D vitepress

待补充内容

请在这里补充:

  • 项目目录结构是怎样的
  • Wiki 放在哪个位置
  • 是否把 Wiki 放在单独的仓库

步骤 2:创建基本结构

bash
# 创建文档目录
mkdir -p docs/.vitepress

待补充内容

请在这里补充实际的目录结构:

wiki/
├── docs/
│   ├── .vitepress/
│   │   └── config.ts          # 配置文件
│   ├── overview/              # 概述章节
│   ├── development/           # 开发章节
│   ├── api/                   # API 文档
│   └── deployment/            # 部署文档
├── package.json
└── README.md

请补充实际使用的目录结构和说明。

步骤 3:配置 VitePress

typescript
// docs/.vitepress/config.ts
import { defineConfig } from 'vitepress'

export default defineConfig({
  title: '拉了么项目 Wiki',
  description: '外卖订餐系统项目文档',
  base: '/wiki/',

  themeConfig: {
    sidebar: [
      {
        text: '项目概述',
        items: [
          { text: '项目简介', link: '/overview/intro' },
          { text: '技术栈', link: '/overview/tech-stack' },
        ]
      },
      // ... 更多配置
    ]
  }
})

待补充内容

请在这里补充:

  • 完整的 VitePress 配置文件
  • 导航栏配置
  • 侧边栏配置
  • 主题定制(如果有)

步骤 4:添加内容

markdown
<!-- docs/overview/intro.md -->
# 项目简介

拉了么是一个外卖订餐系统...

待补充内容

请在这里说明:

  • 第一批添加了哪些文档
  • 文档的组织原则是什么
  • 如何保证文档的完整性

步骤 5:本地预览

bash
# 添加开发脚本
# package.json
{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  }
}

# 启动开发服务器
pnpm docs:dev

待补充内容

请在这里补充:

  • 本地开发体验如何
  • 是否遇到问题
  • 如何解决的

步骤 6:部署

待补充内容

请在这里补充:

  • 部署到哪里(Vercel/Netlify/GitHub Pages/自己服务器)
  • 部署配置
  • CI/CD 流程(如果有)
  • 是否有自定义域名

📁 实际的 Wiki 结构

待补充内容

请在这里展示"拉了么"项目 Wiki 的实际结构:

wiki/
├── docs/
│   ├── index.md               # 首页
│   ├── overview/              # 项目概述
│   │   ├── index.md
│   │   ├── intro.md           # 项目简介
│   │   ├── tech-stack.md      # 技术栈
│   │   └── requirements.md    # 需求文档
│   ├── development/           # 开发相关
│   │   ├── index.md
│   │   ├── setup.md           # 环境搭建
│   │   ├── structure.md       # 项目结构
│   │   ├── guidelines.md      # 开发规范
│   │   └── workflow.md        # 工作流程
│   ├── api/                   # API 文档
│   │   ├── index.md
│   │   ├── user-api.md        # 用户 API
│   │   ├── order-api.md       # 订单 API
│   │   └── payment-api.md     # 支付 API
│   ├── database/              # 数据库
│   │   ├── index.md
│   │   ├── schema.md          # 数据模型
│   │   └── er-diagram.md      # ER 图
│   ├── deployment/            # 部署
│   │   ├── index.md
│   │   ├── frontend.md        # 前端部署
│   │   └── backend.md         # 后端部署
│   └── appendix/              # 附录
│       ├── index.md
│       ├── faq.md             # 常见问题
│       └── glossary.md        # 术语表
└── .vitepress/
    └── config.ts

请补充实际使用的结构。


🎨 主题定制

待补充内容

请在这里说明:

  • 是否定制了主题
  • 修改了哪些样式
  • 是否添加了自定义组件
  • 是否配置了搜索

🔍 搜索配置

待补充内容

请在这里说明:

  • 使用什么搜索(VitePress 内置/Algolia/其他)
  • 搜索配置方法
  • 搜索效果如何

📊 使用效果

开发效率

待补充内容

  • 搭建 Wiki 后,开发效率是否有提升
  • 举例说明(如:新人上手时间从 X 天缩短到 Y 天)

AI 协作

待补充内容

  • AI 使用 Wiki 的效果如何
  • 举例说明(如:之前需要解释半天,现在 AI 直接给出准确建议)

团队协作

待补充内容

  • Wiki 是否帮助团队更好地协作
  • 成员的使用频率如何

💰 成本

待补充内容

请在这里说明搭建和维护 Wiki 的成本:

  • 时间成本(搭建、维护)
  • 金钱成本(部署、域名)
  • 人力成本(写文档、更新文档)

下一步

Wiki 搭建完成后,接下来需要填充内容。在下一节中,我们将详细介绍Wiki 包含哪些内容以及如何组织这些内容。


← 返回案例目录 | 继续学习:Wiki 内容组织 →

最近更新

基于 Apache 2.0 许可发布