社区生鲜团购系统前端 (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
安装依赖
npm install
# 或
yarn install
开发环境
npm run dev
# 或
yarn dev
生产构建
npm run build
# 或
yarn build
预览构建结果
npm run preview
# 或
yarn preview
🔑 测试账号
- 普通用户: user / 123456
- 管理员: admin / 123456
📝 配置说明
环境变量
修改 .env.development 或 .env.production 文件：
# 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 中配置开发环境代理：
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
}
}
}
🚢 部署
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部署
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！
📧 联系我们
Made with ❤️ by Group Buy Team