github-actions-creator/docs/vue.md

Vue.js 项目：交互式个人作品集

概述

使用 Vue.js 3 和 Vite 构建一个现代、响应式的 SPA 个人作品集。网站用于展示个人信息、技能、项目和联系方式，并包含平滑的页面过渡和交互。

功能需求

1. 页面与组件

• 主页: 包含“英雄”区域（介绍）、“关于我”和技能展示（图标或进度条）。
• 作品集页: 使用卡片布局展示项目列表（截图, 标题, 描述, 技术标签）。点击卡片可打开模态框或详情页显示项目详情。
• 联系页: 包含带前端验证的联系表单和社交媒体链接。
• 导航栏: 固定在顶部，含 Logo 和页面链接，滚动时有样式变化。
• 页脚: 版权和社交媒体链接。

2. 交互与动画

• 路由: 使用 vue-router 实现客户端路由，页面切换带过渡效果。
• 响应式: 使用 CSS Flexbox/Grid 和媒体查询适配桌面、平板和手机。
• 状态管理: 使用 Pinia 管理全局状态（如暗黑/明亮模式切换）。
• 动画: 为页面元素加载添加微妙的动画效果（gsap 或 motion）。

技术栈

• 框架: Vue.js 3 (Composition API)
• 构建: Vite
• 路由: Vue Router 4
• 状态管理: Pinia
• 样式: Tailwind CSS 或 SCSS
• 表单验证: vee-validate
• 图标: vue-feather-icons 或 FontAwesome
• 部署: Netlify, Vercel, 或 GitHub Pages

项目结构

/vue-portfolio
├── src/
│   ├── assets/             # 静态资源
│   ├── components/         # 可复用组件
│   ├── views/              # 页面级组件
│   ├── router/             # 路由配置
│   ├── store/              # Pinia store
│   ├── App.vue
│   └── main.js
└── package.json

任务步骤

1. 初始化: 使用 npm create vue@latest 创建项目，选择 Vite, Vue Router, Pinia 等。
2. 结构设置: 创建所需的文件夹和文件。
3. 路由配置: 在 src/router/index.js 中定义所有页面路由。
4. 布局开发: 创建 Navbar 和 Footer 并在 App.vue 中使用。
5. 页面开发: 逐个开发 Home, Portfolio, Contact 页面。
6. 状态管理: 创建 Pinia store 实现主题切换功能。
7. 交互与动画: 使用 <transition> 组件为路由切换添加动画，并为其他元素添加入场效果。
8. 响应式适配: 使用媒体查询确保在所有设备上布局正确。
9. 部署: 将应用部署到静态网站托管平台。

先行任务: 设计网站的线框图和基本视觉风格（主色调、字体）。