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（推荐）

安装依赖

# 推荐使用 pnpm
pnpm install

# 或者使用 npm
npm install

开发模式

pnpm dev

构建生产版本

pnpm build

预览生产版本

pnpm preview

浏览器兼容性

• Chrome >= 87
• Firefox >= 78
• Safari >= 14
• Edge >= 88