57 lines
1.8 KiB
Markdown
57 lines
1.8 KiB
Markdown
# 项目展示平台
|
||
|
||
## 技术栈
|
||
- 前端框架：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. 加载动画：骨架屏脉冲效果
|
||
|
||
## 开发准备
|
||
```bash
|
||
npm install
|
||
npm run dev
|
||
```
|