项目展示平台

技术栈

• 前端框架：Vue3 + Composition API
• UI框架：Ant Design Vue (后台) + Tailwind CSS (前台)
• 动画库：AOS.js
• 路由：Vue Router 4
• 状态管理：Pinia
• 请求库：Axios
• 轮播组件：Swiper

目录结构

src/
├── assets/              # 静态资源
├── components/         # 公共组件
│   ├── ProjectCard.vue # 项目卡片
│   └── Skeleton.vue    # 加载骨架屏
├── layouts/            # 布局组件
│   ├── AdminLayout.vue # 后台布局
│   └── MainLayout.vue  # 前台布局
├── router/             
│   └── index.js       # 路由配置
├── stores/             
│   └── user.js        # 用户状态管理
├── views/
│   ├── frontend/       
│   │   ├── Home.vue          # 首页
│   │   ├── Projects.vue     # 项目列表
│   │   └── Detail.vue       # 项目详情
│   └── admin/          
│       ├── Login.vue        # 后台登录
│       ├── Dashboard.vue    # 数据看板
│       └── ProjectsCRUD.vue # 项目管理
├── App.vue
└── main.js

响应式方案

设备	断点	布局模式	导航模式
手机	<640px	单列流式布局	底部导航栏
平板	640-1024	双栏布局	侧边折叠菜单
PC	>1024px	12栅格系统	顶部水平菜单

动效规范

1. 页面过渡：fade 300ms缓动
2. 卡片入场：aos fade-up + 交错延迟
3. 交互反馈：hover缩放+投影提升
4. 加载动画：骨架屏脉冲效果

开发准备

npm install
npm run dev