新建Vitepress工程提示词记录

提示词内容

# Role
 你是一位精通 Vue 生态、VitePress 架构设计及工程化规范的资深前端工程师。你擅长构建高可维护性、结构清晰且文档完备的技术项目。

 # Goal
 请帮我从零搭建一个基于 VitePress 的技术文档网站项目。
 **核心架构要求**：
 1. **源文件隔离**：所有 `.md` 文档必须位于 `docs/pages/` 目录下。
 2. **全局配置**：仅在 `.vitepress/config.ts` 中通过 `srcDir: './pages'` 指定源目录，确保 URL 路径简洁（无 `/pages` 前缀），且 Nav/Sidebar 配置无需手动拼接路径。
 3. **工程化规范**：包含完整的 README、锁定的依赖版本、标准的 `.gitignore` 及编辑器配置。
 4. **默认主题**：使用默认Vitepress主题即可

 # Tech Stack & Version Locking
 - **Core**: VitePress (锁定版本: `^1.6.3`), Vue (`^3.5.13`)
 - **Package Manager**: pnpm (优先) 或 npm
 - **Language**: TypeScript (配置文件使用 `.vitepress/config.ts`)
 - **Dev Dependencies**: 请明确指定版本，不要使用 `latest`。
   - `vitepress`: `^1.6.3`
   - `vue`: `^3.5.13`
   - `typescript`: `^5.7.2`
   - `@types/node`: `^22.10.2`

 # 🚨 Critical Directory Structure (Physical)
 请严格按照以下物理结构创建文件：

 根目录：`project-root/`
 ├── docs/
 │   ├── .vitepress/
 │   │   ├── config.ts          (🔴 核心：配置 srcDir: './pages')
 │   │   ├── theme/
 │   │   │   └── index.ts       (注册默认主题)
 │   │   └── components/        (可选：自定义组件目录)
 │   ├── pages/                 (🔴 唯一的内容源目录)
 │   │   ├── index.md           (站点首页 -> URL: /)
 │   │   ├── AI/
 │   │   │   ├── index.md       (AI 首页 -> URL: /AI/)
 │   │   │   ├── 新项目实践/
 │   │   │   │   └── index.md   (-> URL: /AI/新项目实践/)
 │   │   │   └── 老项目实践/
 │   │   │       └── index.md   (-> URL: /AI/老项目实践/)
 │   │   ├── 备忘录/
 │   │   │   └── index.md       (-> URL: /备忘录/)
 │   │   └── 记事本/
 │   │       └── index.md       (-> URL: /记事本/)
 │   └── public/                (静态资源，如 favicon.ico)
 ├── .gitignore                 (🔴 必须包含 node_modules, dist, .DS_Store 等)
 ├── .editorconfig              (🔴 统一代码风格)
 ├── tsconfig.json              (TypeScript 基础配置)
 ├── package.json               (🔴 锁定依赖版本)
 └── README.md                  (🔴 项目说明文档)

 # Implementation Steps

 ## 1. 初始化与依赖管理
 - 创建 `package.json`。
 - **关键**：在 `devDependencies` 中**显式锁定**上述指定的版本号，严禁使用 `*` 或 `latest`。
 - 添加 Scripts:
   - `"docs:dev": "vitepress dev docs"`
   - `"docs:build": "vitepress build docs"`
   - `"docs:preview": "vitepress preview docs"`

 ## 2. 工程化文件完善
 - **`.gitignore`**: 必须包含 `node_modules`, `dist`, `.vitepress/cache`, `.DS_Store`, `*.log`, `pnpm-lock.yaml` (如果不确定用哪种包管理器，可以保留 lock 文件或忽略，建议保留 lock 文件但忽略 node_modules)。
 - **`.editorconfig`**: 设置 `indent_style = space`, `indent_size = 2`, `charset = utf-8`, `end_of_line = lf`。
 - **`tsconfig.json`**: 提供基础的 TS 配置，开启 `esModuleInterop`, `skipLibCheck`。

 ## 3. 创建文档结构 (`docs/pages/`)
 - 严格按照上述目录树创建文件夹和 `index.md`。
 - **内容填充**：
   - 所有 `index.md` 需包含 Frontmatter (`title`, `description`, `layout: doc`)。
   - `pages/index.md`: 设计为美观的导航首页，包含三个主要板块的卡片链接（AI 实践、备忘录、记事本）。
   - 其他页面：填入“本章导读”及“待办事项”占位符。

 ## 4. 核心配置 (`.vitepress/config.ts`)
 - 使用 `defineConfig`。
 - **设置 `srcDir: './pages'`**。这是最关键的一步，确保 VitePress 从 `docs/pages` 读取内容，但 URL 保持根路径。
 - **Nav 配置**: 使用根路径 (e.g., `/AI/`, `/备忘录/`)。
 - **Sidebar 配置**: 使用根路径，正确映射文件夹结构。
   ```typescript
   sidebar: {
     '/AI/': [
       {
         text: 'AI 实践指南',
         items: [
           { text: '新项目实践', link: '/AI/新项目实践/' },
           { text: '老项目实践', link: '/AI/老项目实践/' }
         ]
       }
     ],
     '/备忘录/': [{ text: '备忘录列表', link: '/备忘录/' }],
     '/记事本/': [{ text: '记事本列表', link: '/记事本/' }]
   }

提示词分析

这个提示词详细描述了如何从零搭建一个基于 VitePress 的技术文档网站项目，包括：

核心架构要求：源文件隔离、全局配置、工程化规范和默认主题
技术栈和版本锁定：指定了 VitePress、Vue、TypeScript 等依赖的版本
目录结构：详细的物理目录结构，确保项目组织清晰
实现步骤：从初始化依赖到创建文档结构再到核心配置的完整流程

通过这个提示词，可以快速搭建一个结构清晰、配置规范的 VitePress 文档网站。

新建Vitepress工程提示词记录 ​

提示词内容 ​

提示词分析 ​

新建Vitepress工程提示词记录

提示词内容

提示词分析