203 lines
4.4 KiB
Markdown
203 lines
4.4 KiB
Markdown
# 社区生鲜团购系统前端 (Group Buy Frontend)
|
||
|
||
基于 Vue 3 + Vite + TypeScript 构建的现代化社区生鲜团购系统前端应用。
|
||
|
||
## 🚀 技术栈
|
||
|
||
- **框架**: Vue 3.4 (Composition API)
|
||
- **构建工具**: Vite 5.0
|
||
- **编程语言**: TypeScript 5.3
|
||
- **UI组件库**: Element Plus 2.4
|
||
- **状态管理**: Pinia 2.1
|
||
- **路由**: Vue Router 4.2
|
||
- **HTTP客户端**: Axios 1.6
|
||
- **样式**: TailwindCSS 3.4 + Sass
|
||
- **图表**: ECharts 5.4
|
||
- **工具库**: VueUse, Day.js, Lodash
|
||
|
||
## ✨ 功能特性
|
||
|
||
### 用户端功能
|
||
|
||
- 🏠 **首页展示**: 轮播图、限时活动、热门商品推荐
|
||
- 🔐 **用户认证**: 登录、注册、个人中心管理
|
||
- ⚡ **限时活动抢购**: 实时倒计时、库存显示、防重复提交
|
||
- 🛍️ **商品浏览**: 分类筛选、价格排序、关键词搜索
|
||
- 🛒 **购物车**: 商品管理、批量操作、结算功能
|
||
- 📦 **订单管理**: 订单列表、详情查看、状态跟踪
|
||
|
||
### 管理后台
|
||
|
||
- 📊 **数据仪表盘**: 实时统计、图表展示
|
||
- 📝 **内容管理**: 商品、限时活动、订单、用户管理
|
||
- 📈 **数据分析**: 销售趋势、用户行为分析
|
||
|
||
### 高级特性
|
||
|
||
- 🔔 **实时通知**: WebSocket消息推送、消息中心
|
||
- 🔍 **智能搜索**: 搜索历史、热门推荐、实时建议
|
||
- 📸 **图片上传**: 拖拽上传、预览下载、进度显示
|
||
- 📊 **数据导出**: Excel导出、批量处理
|
||
- 🎨 **响应式设计**: 移动端适配、深色模式（开发中）
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
community-fresh-group-buy-frontend/
|
||
├── src/
|
||
│ ├── api/ # API接口封装
|
||
│ ├── assets/ # 静态资源
|
||
│ ├── components/ # 组件
|
||
│ │ ├── common/ # 通用组件
|
||
│ │ ├── business/ # 业务组件
|
||
│ │ └── layout/ # 布局组件
|
||
│ ├── composables/ # 组合式函数
|
||
│ ├── layouts/ # 页面布局
|
||
│ ├── pages/ # 页面视图
|
||
│ ├── router/ # 路由配置
|
||
│ ├── stores/ # Pinia状态管理
|
||
│ ├── styles/ # 全局样式
|
||
│ ├── types/ # TypeScript类型定义
|
||
│ └── utils/ # 工具函数
|
||
├── public/ # 公共资源
|
||
├── .env.development # 开发环境变量
|
||
├── .env.production # 生产环境变量
|
||
└── vite.config.ts # Vite配置
|
||
```
|
||
|
||
## 🔧 安装使用
|
||
|
||
### 环境要求
|
||
|
||
- Node.js >= 16.0
|
||
- npm >= 8.0 或 yarn >= 1.22
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
# 或
|
||
yarn install
|
||
```
|
||
|
||
### 开发环境
|
||
|
||
```bash
|
||
npm run dev
|
||
# 或
|
||
yarn dev
|
||
```
|
||
|
||
访问 http://localhost:3000
|
||
|
||
### 生产构建
|
||
|
||
```bash
|
||
npm run build
|
||
# 或
|
||
yarn build
|
||
```
|
||
|
||
### 预览构建结果
|
||
|
||
```bash
|
||
npm run preview
|
||
# 或
|
||
yarn preview
|
||
```
|
||
|
||
## 🔑 测试账号
|
||
|
||
- **普通用户**: user / 123456
|
||
- **管理员**: admin / 123456
|
||
|
||
## 📝 配置说明
|
||
|
||
### 环境变量
|
||
|
||
修改 `.env.development` 或 `.env.production` 文件：
|
||
|
||
```env
|
||
# API基础路径
|
||
VITE_API_BASE_URL=http://localhost:8080
|
||
|
||
# WebSocket地址
|
||
VITE_WS_URL=ws://localhost:8080/ws
|
||
|
||
# 上传地址
|
||
VITE_UPLOAD_URL=http://localhost:8080/upload
|
||
```
|
||
|
||
### 代理配置
|
||
|
||
在 `vite.config.ts` 中配置开发环境代理：
|
||
|
||
```typescript
|
||
server: {
|
||
proxy: {
|
||
'/api': {
|
||
target: 'http://localhost:8080',
|
||
changeOrigin: true,
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## 🚢 部署
|
||
|
||
### Nginx配置示例
|
||
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name your-domain.com;
|
||
root /path/to/dist;
|
||
|
||
location / {
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
|
||
location /api {
|
||
proxy_pass http://backend-server:8080;
|
||
proxy_set_header Host $host;
|
||
proxy_set_header X-Real-IP $remote_addr;
|
||
}
|
||
}
|
||
```
|
||
|
||
### Docker部署
|
||
|
||
```dockerfile
|
||
FROM nginx:alpine
|
||
COPY dist /usr/share/nginx/html
|
||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||
EXPOSE 80
|
||
CMD ["nginx", "-g", "daemon off;"]
|
||
```
|
||
|
||
## 🎯 性能优化
|
||
|
||
- **路由懒加载**: 减少首屏加载时间
|
||
- **组件缓存**: keep-alive缓存页面状态
|
||
- **图片懒加载**: 按需加载图片资源
|
||
- **代码分割**: 自动分包优化
|
||
- **Gzip压缩**: 减少传输体积
|
||
- **CDN加速**: 静态资源CDN分发
|
||
|
||
## 📄 许可证
|
||
|
||
MIT License
|
||
|
||
## 🤝 贡献
|
||
|
||
欢迎提交 Issue 和 Pull Request！
|
||
|
||
## 📧 联系我们
|
||
|
||
- 邮箱: contact@community-fresh-groupbuy.example
|
||
- 官网: https://community-fresh-groupbuy.example
|
||
|
||
---
|
||
|
||
Made with ❤️ by Group Buy Team
|