零食小屋 - Vue3 零食销售商城
项目简介
零食小屋是一个基于 Vue 3 + Element Plus 的现代化零食电商商城平台，提供完整的购物体验，包括商品浏览、购物车、收藏、用户中心等功能。
技术栈
- 前端框架: Vue 3 (Composition API)
- UI 组件库: Element Plus
- 构建工具: Vite
- 状态管理: Pinia
- 路由管理: Vue Router
- HTTP 请求: Axios
- 图标库: @element-plus/icons-vue
功能特性
🏪 核心功能
- ✅ 首页轮播图和分类导航
- ✅ 商品列表页（支持筛选、排序、搜索）
- ✅ 商品详情页（包含评价、推荐等）
- ✅ 购物车系统（批量操作、优惠券）
- ✅ 收藏功能（一键收藏、批量管理）
- ✅ 用户系统（登录、注册、个人中心）
🎨 页面设计
- 📱首页: 轮播图、分类导航、热销商品、品牌故事
- 🛍️商品列表: 智能筛选、实时搜索、多种排序
- 📦商品详情: 详细信息、用户评价、配送说明
- 🛒购物车: 批量操作、优惠券、价格汇总
- ⭐收藏页: 收藏管理、批量添加购物车
- 👤个人中心: 信息管理、安全设置、订单管理
- 📖美食攻略: 选购技巧、储存方法、健康搭配
- ℹ️关于我们: 品牌故事、团队介绍、发展历程
- 📞联系我们: 联系表单、常见问题、地图定位
- 🚫404页面: 友好的错误提示和导航
🛠️ 技术特性
- 🔄响应式设计: 完美适配 PC、平板、手机
- 🎯组件化开发: 9个自定义组件，高度复用
- 💾数据持久化: localStorage 本地存储
- 🔒路由守卫: 登录验证和权限控制
- 📊状态管理: Pinia 统一管理应用状态
- 🔍智能搜索: 实时搜索建议和热门推荐
- 🎨主题风格: 橙红色主题，现代化设计
项目结构
snack-mall/ ├── public/ # 静态资源 ├── src/ │ ├── assets/ # 资源文件 │ ├── components/ # 公共组件 │ │ ├── Header.vue # 头部导航 │ │ ├── Footer.vue # 页脚 │ │ ├── ProductCard.vue # 商品卡片 │ │ ├── CartItem.vue # 购物车项 │ │ ├── CategoryTag.vue # 分类标签 │ │ ├── SearchBox.vue # 搜索框 │ │ ├── ProductFilter.vue # 商品筛选 │ │ └── PriceTag.vue # 价格标签 │ ├── router/ # 路由配置 │ ├── stores/ # Pinia 状态管理 │ │ ├── user.js # 用户状态 │ │ ├── cart.js # 购物车状态 │ │ ├── products.js # 商品状态 │ │ └── favorites.js # 收藏状态 │ ├── utils/ # 工具函数 │ ├── views/ # 页面组件 │ │ ├── Home.vue # 首页 │ │ ├── ProductList.vue # 商品列表 │ │ ├── ProductDetail.vue # 商品详情 │ │ ├── Cart.vue # 购物车 │ │ ├── Favorites.vue # 收藏页 │ │ ├── Profile.vue # 个人中心 │ │ ├── Login.vue # 登录页 │ │ ├── Register.vue # 注册页 │ │ ├── FoodGuide.vue # 美食攻略 │ │ ├── About.vue # 关于我们 │ │ ├── Contact.vue # 联系我们 │ │ └── NotFound.vue # 404页面 │ ├── App.vue # 根组件 │ └── main.js # 入口文件 ├── index.html # HTML 模板 ├── package.json # 项目配置 ├── vite.config.js # Vite 配置 └── README.md # 项目说明安装和运行
环境要求
- Node.js >= 16.0.0
- npm >= 7.0.0
安装依赖
npminstall开发模式
npmrun dev构建生产版本
npmrun build预览生产版本
npmrun preview核心组件说明
Header 组件
- 包含网站 Logo、导航菜单、搜索框、用户操作
- 响应式设计，移动端自适应
- 集成购物车数量、收藏数量显示
ProductCard 组件
- 商品卡片展示，支持收藏、加入购物车
- 悬停效果和动画过渡
- 价格标签、评分、销量等信息展示
CartItem 组件
- 购物车商品项，支持数量修改、删除
- 批量选择和操作
- 收藏功能集成
SearchBox 组件
- 智能搜索框，支持实时建议
- 热门搜索标签
- 搜索历史记录
状态管理
用户状态 (user.js)
- 用户登录、注册、信息管理
- Token 验证和路由守卫
- 本地存储持久化
购物车状态 (cart.js)
- 商品添加、删除、数量修改
- 批量选择和操作
- 价格计算和优惠券
商品状态 (products.js)
- 商品数据管理
- 分类筛选和搜索
- 排序和分页
收藏状态 (favorites.js)
- 收藏添加、删除
- 批量管理
- 与购物车联动
路由配置
- 路由懒加载，优化性能
- 登录验证守卫
- 404 错误处理
- 页面标题动态设置
样式设计
- CSS 变量管理主题色彩
- 响应式 Grid 和 Flexbox 布局
- 平滑的动画过渡效果
- 橙红色主题风格
浏览器兼容性
- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88
开发说明
本项目采用 Vue 3 Composition API 开发，遵循组件化开发原则，代码结构清晰，易于维护和扩展。所有数据使用模拟数据，纯前端实现，无需后端服务。
效果图:
源码获取：
**大家点赞、收藏、关注、评论啦 、查看👇🏻获取联系方式👇🏻 精彩专栏推荐订阅：在下方专栏👇🏻
