2025-04-24 16:59:40 +08:00
|
|
|
|
# 项目展示平台
|
2025-04-24 13:39:24 +08:00
|
|
|
|
|
2025-04-24 16:59:40 +08:00
|
|
|
|
## 技术栈
|
|
|
|
|
|
- 前端框架：Vue3 + Composition API
|
|
|
|
|
|
- UI框架：Ant Design Vue (后台) + Tailwind CSS (前台)
|
|
|
|
|
|
- 动画库：AOS.js
|
|
|
|
|
|
- 路由：Vue Router 4
|
|
|
|
|
|
- 状态管理：Pinia
|
|
|
|
|
|
- 请求库：Axios
|
|
|
|
|
|
- 轮播组件：Swiper
|
2025-04-24 13:39:24 +08:00
|
|
|
|
|
2025-04-24 16:59:40 +08:00
|
|
|
|
## 目录结构
|
|
|
|
|
|
```
|
|
|
|
|
|
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. 加载动画：骨架屏脉冲效果
|
|
|
|
|
|
|
|
|
|
|
|
## 开发准备
|
|
|
|
|
|
```bash
|
|
|
|
|
|
npm install
|
|
|
|
|
|
npm run dev
|
|
|
|
|
|
```
|
