# enba-h5-template **Repository Path**: mn_cxy/enba-h5-template ## Basic Information - **Project Name**: enba-h5-template - **Description**: 🚀一个基于 Vue3 + Vite + NutUI + Pinia 的H5前端商城系统脚手架。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-08-24 - **Last Updated**: 2025-08-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 恩爸H5购物商城 一个基于Vue 3的移动端H5购物商城前端项目，使用现代化的技术栈构建，提供完整的电商购物体验。 ## 🚀 技术栈 - **Vue 3.3.4** - 渐进式JavaScript框架，使用Composition API - **Vite 4.4.5** - 下一代前端构建工具，快速开发体验 - **Pinia 2.1.6** - Vue官方推荐的状态管理库 - **Vue Router 4.2.4** - Vue官方路由管理器 - **NutUI-Vue 4.3.0** - 京东风格的Vue组件库 - **@nutui/icons-vue** - NutUI图标库 - **Axios 1.4.0** - HTTP客户端 - **MockJS** - 数据模拟，开发阶段使用 - **ES6+** - 现代JavaScript语法 ## ✨ 功能特性 ### 🏠 首页模块 - **轮播图展示** - 支持自动轮播和手动切换 - **分类导航** - 8个主要商品分类，支持点击跳转 - **限时特惠商品** - 网格布局展示热门商品 - **新品推荐** - 列表布局展示最新商品 - **搜索功能** - 顶部搜索栏，快速跳转到搜索页 ### 📱 分类模块 - **左侧分类菜单** - 垂直滚动的主分类列表 - **右侧子分类展示** - 水平滚动的子分类展示 - **商品列表** - 支持商品预览和快速操作 - **快速添加到购物车** - 一键添加商品到购物车 ### 🛒 购物车模块 - **商品选择** - 支持单选和全选功能 - **数量调整** - 加减按钮调整商品数量 - **批量操作** - 批量删除、批量结算 - **价格计算** - 实时计算总价和优惠 - **推荐商品** - 底部推荐相关商品 ### 👤 用户中心 - **用户登录/注册** - 完整的用户认证系统 - **个人资料管理** - 用户信息展示和编辑 - **订单状态查看** - 待付款、待发货、待收货、待评价 - **收货地址管理** - 新增、编辑、删除、设置默认地址 - **我的收藏** - 收藏商品管理，支持搜索和排序 - **优惠券管理** - 可用、已使用、已过期优惠券 ### 🔍 搜索功能 - **商品搜索** - 关键词搜索商品 - **搜索历史** - 自动保存搜索记录 - **热门搜索** - 展示热门搜索词 - **搜索建议** - 智能搜索建议 ### 📦 订单管理 - **订单列表** - 按状态分类展示订单 - **订单详情** - 完整的订单信息展示 - **订单状态跟踪** - 实时订单状态更新 - **订单评价** - 商品评价功能 ### 💳 支付功能 - **订单确认** - 商品确认、地址选择、优惠券使用 - **支付方式** - 支持多种支付方式 - **支付页面** - 完整的支付流程 ### 🎫 优惠券系统 - **优惠券类型** - 满减券、折扣券、免邮券 - **优惠券状态** - 可用、已使用、已过期 - **优惠券使用** - 一键使用优惠券 ### ❤️ 收藏功能 - **收藏管理** - 添加、取消、批量操作 - **收藏搜索** - 按名称和描述搜索 - **收藏排序** - 按时间、价格排序 - **收藏统计** - 收藏数量统计 ## 🛠️ 项目结构 ``` enba-h5-template/ ├── public/ # 静态资源 ├── src/ # 源代码 │ ├── api/ # API接口定义 │ │ ├── index.js # API统一导出 │ │ ├── user.js # 用户相关API │ │ ├── product.js # 商品相关API │ │ └── cart.js # 购物车相关API │ ├── assets/ # 静态资源 │ ├── components/ # 公共组件 │ ├── mock/ # Mock数据 │ │ ├── index.js # Mock配置 │ │ └── config.js # Mock数据配置 │ ├── router/ # 路由配置 │ │ └── index.js # 路由定义和守卫 │ ├── stores/ # 状态管理 │ │ ├── user.js # 用户状态 │ │ ├── cart.js # 购物车状态 │ │ ├── address.js # 地址管理状态 │ │ ├── favorites.js # 收藏状态 │ │ └── coupons.js # 优惠券状态 │ ├── utils/ # 工具函数 │ ├── views/ # 页面组件 │ │ ├── Home.vue # 首页 │ │ ├── Category.vue # 分类页 │ │ ├── Cart.vue # 购物车 │ │ ├── User.vue # 用户中心 │ │ ├── Login.vue # 登录页 │ │ ├── Register.vue # 注册页 │ │ ├── Search.vue # 搜索页 │ │ ├── ProductDetail.vue # 商品详情 │ │ ├── Order.vue # 订单列表 │ │ ├── OrderDetail.vue # 订单详情 │ │ ├── Checkout.vue # 结算页 │ │ ├── Payment.vue # 支付页 │ │ ├── AddressList.vue # 地址列表 │ │ ├── AddressEdit.vue # 地址编辑 │ │ ├── Favorites.vue # 收藏页 │ │ ├── Coupons.vue # 优惠券页 │ │ └── TestMock.vue # Mock测试页 │ ├── App.vue # 根组件 │ └── main.js # 入口文件 ├── index.html # HTML模板 ├── package.json # 项目配置 ├── vite.config.js # Vite配置 └── README.md # 项目说明 ``` ## 🚀 快速开始 ### 环境要求 - Node.js >= 16.0.0 - npm >= 8.0.0 或 yarn >= 1.22.0 ### 安装依赖 ```bash # 克隆项目 git clone https://gitee.com/mn_cxy/enba-h5-template.git # 进入项目目录 cd enba-h5-template # 安装依赖 npm install # 或 yarn install ``` ### 开发模式 ```bash npm run dev # 或 yarn dev ``` ### 构建生产版本 ```bash npm run build # 或 yarn build ``` ### 预览生产版本 ```bash npm run preview # 或 yarn preview ``` ### 代码检查 ```bash npm run lint # 或 yarn lint ``` ## 📱 页面路由 | 路由 | 页面 | 描述 | 是否需要登录 | |------|------|------|-------------| | `/` | 首页 | 商城首页，展示轮播图、分类、商品推荐 | ❌ | | `/category` | 分类页 | 商品分类浏览，支持二级分类 | ❌ | | `/cart` | 购物车 | 购物车管理，商品选择、数量调整 | ✅ | | `/user` | 用户中心 | 个人中心，订单管理、设置等 | ❌ | | `/login` | 登录页 | 用户登录，支持用户名/密码登录 | ❌ | | `/register` | 注册页 | 用户注册，创建新账户 | ❌ | | `/search` | 搜索页 | 商品搜索，支持关键词搜索 | ❌ | | `/product-detail/:id` | 商品详情 | 商品详细信息，支持加入购物车 | ❌ | | `/order` | 订单列表 | 我的订单，按状态分类 | ✅ | | `/order-detail/:id` | 订单详情 | 订单详细信息，状态跟踪 | ✅ | | `/checkout` | 结算页 | 订单确认，地址选择、支付方式 | ✅ | | `/payment` | 支付页 | 订单支付，多种支付方式 | ✅ | | `/address-list` | 地址列表 | 收货地址管理 | ✅ | | `/address-edit/:id` | 地址编辑 | 新增/编辑收货地址 | ✅ | | `/favorites` | 收藏页 | 我的收藏，商品收藏管理 | ✅ | | `/coupons` | 优惠券页 | 优惠券管理，使用和查看 | ✅ | ## 🎨 组件库 项目使用NutUI-Vue组件库，包含以下常用组件： ### 基础组件 - **Button** - 按钮组件 - **Input** - 输入框组件 - **Checkbox** - 复选框组件 - **Radio** - 单选框组件 - **Switch** - 开关组件 ### 反馈组件 - **Toast** - 轻提示组件 - **Dialog** - 对话框组件 - **Loading** - 加载组件 - **Popup** - 弹出层组件 ### 展示组件 - **Swiper** - 轮播图组件 - **Card** - 卡片组件 - **List** - 列表组件 - **Grid** - 宫格组件 ### 导航组件 - **Tabbar** - 标签栏组件 - **Tabs** - 标签页组件 - **Menu** - 菜单组件 ### 表单组件 - **Form** - 表单组件 - **Field** - 输入框组件 - **Picker** - 选择器组件 ## 📊 状态管理 使用Pinia进行状态管理，主要包含以下Store： ### 用户状态 (`useUserStore`) - 用户信息管理 - 登录状态维护 - 用户认证逻辑 ### 购物车状态 (`useCartStore`) - 购物车商品管理 - 商品数量调整 - 商品选择状态 - 价格计算逻辑 - 本地存储同步 ### 地址管理状态 (`useAddressStore`) - 收货地址列表 - 地址增删改查 - 默认地址设置 - 地址验证逻辑 ### 收藏状态 (`useFavoritesStore`) - 收藏商品管理 - 收藏状态切换 - 收藏搜索排序 - 批量操作功能 ### 优惠券状态 (`useCouponsStore`) - 优惠券列表管理 - 优惠券使用逻辑 - 优惠券状态更新 - 优惠券验证 ## 🔧 开发配置 ### 开发服务器 - 端口: 3000 (默认) - 自动打开浏览器 - 热更新支持 - Mock数据支持 ### 构建配置 - 输出目录: `dist/` - 资源目录: `assets/` - 源码映射: 关闭（生产环境） - 代码压缩: 启用 ### 代码规范 - ESLint配置 - Prettier格式化 - Vue 3 Composition API - 组件命名规范 ### Mock数据 - 开发阶段使用MockJS - 模拟真实API接口 - 支持数据定制 ## 📱 移动端适配 ### 响应式设计 - 适配不同屏幕尺寸 - 移动端优先设计 - 触摸友好的交互 ### 性能优化 - 图片懒加载 - 组件按需加载 - 路由懒加载 - 代码分割 ### 用户体验 - 流畅的动画效果 - 直观的操作反馈 - 友好的错误提示 - 加载状态提示 ## 🚀 部署说明 ### 静态部署 项目构建后生成静态文件，可部署到： - **Nginx** - 高性能Web服务器 - **Apache** - 传统Web服务器 - **CDN服务** - 内容分发网络 - **静态托管服务** - Vercel、Netlify等 ### 环境变量 ```bash # 开发环境 VITE_API_BASE_URL=http://localhost:3000/api VITE_MOCK_ENABLED=true # 生产环境 VITE_API_BASE_URL=https://api.example.com VITE_MOCK_ENABLED=false ``` ### 部署步骤 1. 构建项目: `npm run build` 2. 上传dist目录到服务器 3. 配置Web服务器 4. 设置环境变量 5. 测试访问 ## 🧪 测试功能 ### Mock测试页面 - 访问 `/test-mock` 路由 - 测试Mock数据功能 - 验证API接口模拟 ### 测试账号 - 用户名: `admin` - 密码: `123456` ## 🤝 贡献指南 1. Fork 项目 2. 创建功能分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 打开 Pull Request ### 开发规范 - 遵循Vue 3 Composition API - 使用ESLint进行代码检查 - 提交前运行 `npm run lint` - 保持代码注释完整 ## 📄 许可证 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 ## 📞 联系方式 - **项目维护者**: 恩爸编程 - **邮箱**: support@enba.com - **项目地址**: https://gitee.com/mn_cxy/enba-h5-template - **技术交流**: 欢迎提交Issue和Pull Request ## 🙏 致谢 感谢以下开源项目的支持： - [Vue.js](https://vuejs.org/) - 渐进式JavaScript框架 - [Vite](https://vitejs.dev/) - 下一代前端构建工具 - [NutUI](https://nutui.jd.com/) - 京东风格的Vue组件库 - [Pinia](https://pinia.vuejs.org/) - Vue状态管理库 - [Vue Router](https://router.vuejs.org/) - Vue官方路由管理器 ## 📈 项目特色 ### 🎯 完整功能 - 涵盖电商核心功能 - 用户体验优化 - 移动端适配完善 ### 🛠️ 技术先进 - Vue 3 + Composition API - 现代化构建工具 - 组件化开发 ### 📱 移动优先 - 响应式设计 - 触摸友好交互 - 性能优化 ### 🔧 开发友好 - 完整的开发文档 - Mock数据支持 - 代码规范统一 --- ⭐ 如果这个项目对您有帮助，请给我们一个星标！ 🚀 欢迎使用和贡献代码，一起打造更好的H5购物商城！