117 lines
3.3 KiB
Markdown
117 lines
3.3 KiB
Markdown
# SPA-View 项目展示平台
|
||
|
||
## 项目介绍
|
||
|
||
SPA-View 是一个基于 Vue3 开发的单页应用项目展示平台，包含前台展示和后台管理两大模块。前台提供精美的项目展示、服务介绍和客户评价等功能，后台支持项目管理和数据看板等功能。整个应用采用现代化的设计风格，结合丰富的动画效果，为用户提供流畅的浏览体验。
|
||
|
||
## 功能特点
|
||
|
||
- **精美首页**：包含高端轮播图、精选项目展示、客户评价和合作伙伴展示
|
||
- **项目展示**：支持分类筛选、排序和搜索功能的项目列表
|
||
- **项目详情**：展示项目的详细信息、特点和相关资源
|
||
- **服务介绍**：展示公司提供的各类服务及其特点
|
||
- **后台管理**：项目管理、数据统计和用户管理等功能
|
||
- **响应式设计**：完美适配手机、平板和桌面设备
|
||
- **动画效果**：使用 AOS 和 Swiper 实现丰富的动画和过渡效果
|
||
|
||
## 技术栈
|
||
|
||
- **前端框架**：Vue 3 + Composition API
|
||
- **构建工具**：Vite
|
||
- **UI 框架**：
|
||
- 前台：Tailwind CSS
|
||
- 后台：Ant Design Vue
|
||
- **路由管理**：Vue Router 4
|
||
- **状态管理**：Pinia
|
||
- **HTTP 请求**：Axios
|
||
- **动画库**：
|
||
- AOS (Animate On Scroll)
|
||
- Swiper (轮播组件)
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
src/
|
||
├── assets/ # 静态资源
|
||
├── components/ # 公共组件
|
||
│ └── common/ # 通用组件
|
||
├── layouts/ # 布局组件
|
||
│ ├── AdminLayout.vue # 后台布局
|
||
│ └── MainLayout.vue # 前台布局
|
||
├── router/
|
||
│ └── index.js # 路由配置
|
||
├── stores/
|
||
│ └── user.js # 用户状态管理
|
||
├── views/
|
||
│ ├── frontend/ # 前台页面
|
||
│ │ ├── Home.vue # 首页
|
||
│ │ ├── Projects.vue # 项目列表
|
||
│ │ ├── Detail.vue # 项目详情
|
||
│ │ ├── Services.vue # 服务介绍
|
||
│ │ ├── About.vue # 关于我们
|
||
│ │ └── Personal.vue # 个人中心
|
||
│ └── admin/ # 后台页面
|
||
│ ├── Dashboard.vue # 数据看板
|
||
│ └── ProjectsCRUD.vue # 项目管理
|
||
├── App.vue # 根组件
|
||
└── main.js # 入口文件
|
||
```
|
||
|
||
## 响应式方案
|
||
|
||
| 设备 | 断点 | 布局模式 | 导航模式 |
|
||
|---------|----------|-------------------|------------------|
|
||
| 手机 | <640px | 单列流式布局 | 底部导航栏 |
|
||
| 平板 | 640-1024 | 双栏布局 | 侧边折叠菜单 |
|
||
| PC | >1024px | 12栅格系统 | 顶部水平菜单 |
|
||
|
||
## 动效规范
|
||
|
||
1. 页面过渡：fade 300ms 缓动
|
||
2. 卡片入场：aos fade-up + 交错延迟
|
||
3. 交互反馈：hover 缩放 + 投影提升
|
||
4. 加载动画：骨架屏脉冲效果
|
||
5. 轮播效果：fade 过渡 + 自动播放
|
||
|
||
## 安装与使用
|
||
|
||
### 环境要求
|
||
|
||
- Node.js >= 16.0.0
|
||
- pnpm >= 7.0.0（推荐）
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
# 推荐使用 pnpm
|
||
pnpm install
|
||
|
||
# 或者使用 npm
|
||
npm install
|
||
```
|
||
|
||
### 开发模式
|
||
|
||
```bash
|
||
pnpm dev
|
||
```
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
pnpm build
|
||
```
|
||
|
||
### 预览生产版本
|
||
|
||
```bash
|
||
pnpm preview
|
||
```
|
||
|
||
## 浏览器兼容性
|
||
|
||
- Chrome >= 87
|
||
- Firefox >= 78
|
||
- Safari >= 14
|
||
- Edge >= 88
|