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.
2.1 KiB
2.1 KiB
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）