3058f251bc
This commit establishes the foundational structure for the Cheatsheet Hub project. It includes the setup of a Vue 3, Vite, and TailwindCSS stack, along with core application features: - **Routing:** Configures `vue-router` for Home, Cheatsheet List, and Cheatsheet Detail pages. - **State Management:** Implements a `pinia` store for theme management (dark/light mode) and mock data. - **UI Components:** Adds reusable components like `NavBar`, `CheatsheetCard`, and `PrintButton`. - **Styling:** Integrates TailwindCSS with custom base styles, dark mode support, and print-friendly optimizations. - **Dependencies:** Adds key libraries including `marked` for content rendering.
68 lines
2.1 KiB
Markdown
68 lines
2.1 KiB
Markdown
# Cheatsheet 网站项目 Scaffold
|
||
|
||
你是一名资深前端架构师，熟悉 **Vue 3 + Vite + TailwindCSS** 的现代前端开发栈。
|
||
请帮我生成一个 **Cheatsheet 网站** 的基础工程结构，要求如下：
|
||
|
||
## 1. 技术栈
|
||
|
||
* **框架**：Vue 3 (Composition API)
|
||
* **构建工具**：Vite
|
||
* **样式**：TailwindCSS + 自定义 base.css / main.css
|
||
* **组件库**：官方 Vue 生态优先（可选 shadcn-vue / headlessui / radix-vue）
|
||
* **工具库**：
|
||
|
||
* `vue-router` （多视图切换：主页 / Cheatsheet 列表 / 单个 Cheatsheet 页面）
|
||
* `pinia` （全局状态管理，用于存储 Cheatsheet 配置、主题偏好）
|
||
* `axios` 或 `fetch`（数据获取，预留接口位）
|
||
|
||
## 2. 项目结构
|
||
|
||
请生成一个基础目录结构，包含：
|
||
|
||
```
|
||
src/
|
||
assets/ # 静态资源
|
||
components/ # 通用组件（按钮、卡片、导航栏）
|
||
views/ # 页面视图（HomeView, CheatsheetListView, CheatsheetDetailView）
|
||
store/ # Pinia 状态管理
|
||
router/ # vue-router 配置
|
||
styles/
|
||
base.css # Tailwind 基础覆盖样式
|
||
main.css # 全局样式入口
|
||
App.vue
|
||
main.js
|
||
```
|
||
|
||
## 3. 基础样式
|
||
|
||
* 在 `base.css` 中：
|
||
|
||
* 定义打印优化样式（例如：去掉多余边框、背景）
|
||
* 定义默认字体、字号（便于打印的 A4 规格）
|
||
* 在 `main.css` 中：
|
||
|
||
* 引入 Tailwind
|
||
* 定义全局主题色（默认浅色 / 深色模式切换）
|
||
|
||
## 4. 默认页面
|
||
|
||
请提供基础模板代码：
|
||
|
||
* **HomeView**：展示官方 Cheatsheet（Docker, Vim）+ 推荐的自定义入口
|
||
* **CheatsheetListView**：显示所有 Cheatsheet 的卡片列表
|
||
* **CheatsheetDetailView**：单个 Cheatsheet 的内容，支持「打印模式」按钮
|
||
|
||
## 5. 通用组件
|
||
|
||
请生成：
|
||
|
||
* `NavBar.vue`（带首页 / Cheatsheet 列表 / 主题切换按钮）
|
||
* `CheatsheetCard.vue`（显示标题、简介、打印按钮）
|
||
* `PrintButton.vue`（触发浏览器打印）
|
||
|
||
## 6. 额外要求
|
||
|
||
* 所有组件保持简洁、易扩展，留出注释
|
||
* 尽量用 Tailwind Utility Class，而不是额外 CSS
|
||
* 确保项目可以直接运行（npm run dev）
|