newbee-ltd / newbee-mall-vue3-app
🔥 🎉Vue3 全家桶 + Vant 搭建大型单页面商城项目,新蜂商城 Vue3.2 版本,技术栈为 Vue3.2 + Vue-Router4.x + Pinia + Vant4.x。
AI Architecture Analysis
This repository is indexed by RepoMind. By analyzing newbee-ltd/newbee-mall-vue3-app in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.
Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.
Repository Summary (README)
Preview
newbee-mall 项目是一套电商系统,包括 newbee-mall 商城系统及 newbee-mall-admin 商城后台管理系统,基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。
本仓库中的源码为新蜂商城前后端分离版本的 Vue 项目(Vue 版本为 3.x),主要面向前端开发人员,后端 API 源码在另外一个仓库 newbee-mall-api。
新蜂商城 Vue3 版本线上预览地址:http://vue3-app.newbee.ltd,账号可自行注册,建议使用手机模式打开。
newbee-mall (新蜂商城)系列项目概览

| 项目名称 | 仓库地址 | 备注 |
|---|---|---|
| newbee-mall | newbee-mall in GitHub<br>newbee-mall in Gitee | 初始版本、Spring Boot、Thymeleaf、MyBatis、MySQL |
| newbee-mall-plus | newbee-mall-plus in GitHub<br/>newbee-mall-plus in Gitee | 升级版本、优惠券、秒杀、支付、Spring Boot、Thymeleaf、MyBatis、MySQL、Redis |
| newbee-mall-cloud | newbee-mall-cloud in GitHub<br/>newbee-mall-cloud in Gitee | 微服务版本、分布式事务、Spring Cloud Alibaba、Nacos、Sentinel、OpenFeign、Seata |
| newbee-mall-api | newbee-mall-api in GitHub<br/>newbee-mall-api in Gitee | 前后端分离、Spring Boot、MyBatis、Swagger、MySQL |
| newbee-mall-api-go | newbee-mall-api-go in GitHub<br/>newbee-mall-api-go in Gitee | 前后端分离、Go、Gin、MySQL |
| newbee-mall-vue-app | newbee-mall-vue-app in GitHub<br/>newbee-mall-vue-app in Gitee | 前后端分离、Vue2、Vant |
| newbee-mall-vue3-app | newbee-mall-vue3-app in GitHub<br/>newbee-mall-vue3-app in Gitee | 前后端分离、Vue3、Vue-Router4、Pinia、Vant4 |
| vue3-admin | vue3-admin in GitHub<br/>vue3-admin in Gitee | 前后端分离、Vue3、Element-Plus、Vue-Router4、Vite |
坚持不易,如果觉得项目还不错的话可以给项目一个 Star 吧,也是对我一直更新代码的一种鼓励啦,谢谢各位的支持。
开发及部署文档
- 开篇词:手把手带你搭建Vue3+Spring Boot大型前后端分离项目
- 项目须知和课程约定
- 2023年2月小册全新优化升级
- 全栈开发!你必须要知道的“前后端分离”
- 前端模块化的发展历史
- 传统页面和单页面的权衡与抉择
- 准备工作及基础环境搭建(后端)
- Spring Boot 项目初体验--项目搭建及启动
- 项目编码简化利器!Spring Boot 整合 Lombok
- Lombok 插件问题处理
- 商城后端项目启动和运行注意事项
- VSCode 的相关配置及插件介绍
- 基础篇:Vue 指令
- Vue3 新特性介绍
- 基础篇: CSS 预处理工具Less的介绍及使用
- 脚手架工具 Vite
- Vue-Router 浅析原理及使用
- 全局状态管理插件 Pinia 简介及使用
- 商城前端 H5 开发环境搭建及项目启动
- 前后端交互文档利器!Spring Boot 整合 Swagger
- 接口参数处理和统一响应结果
- 口设计规范及接口调用实践
- 商城开发实战-用户登录接口开发
- 商城开发实战-用户身份认证详解
- 商城开发实战-首页模块接口开发
- 商城开发实战-分类模块接口开发
- 商城开发实战-商品搜索模块接口开发
- 商城开发实战-购物车模块接口开发
- 商城开发实战-个人信息及收货地址接口开发
- 商城开发实战-下单流程接口开发
- 商城开发实战-订单处理流程详解
- 商城移动端开发实战-新蜂商城底部导航(抽离公共组件)
- 商城移动端开发实战-新蜂商城登录注册页(前端鉴权)
- 商城移动端开发实战-商城首页制作(轮播图、首页商品列表)
- 商城移动端开发实战-商品分类页面制作(better-scrol的介绍及使用)
- 商城移动端开发实战-商品列表页面制作(无限滚动加载)
- 商城移动端开发实战-商品详情页面制作(Pinia 购物车数量全局管理)
- 商城移动端开发实战-商城购物车页面制作(购物车页)
- 商城移动端开发实战-确认订单页面制作
- 商城移动端开发实战-地址栏管理页面制作
- 商城移动端开发实战-我的订单页面制作
- 常见问题汇总讲解
联系作者
大家有任何问题或者建议都可以在 issues 中反馈给我,我会慢慢完善这个项目。
- 我的邮箱:2449207463@qq.com
- QQ技术交流群:932227898 552142710
关注公众号:程序员十三,回复"勾搭"进群交流。

软件著作权
本系统已申请软件著作权,受国家版权局知识产权以及国家计算机软件著作权保护!

页面展示
以下为新蜂商城 Vue3 版本的页面预览:
- 登录页

- 首页

- 商品搜索

- 商品详情页

- 购物车

- 生成订单

- 地址管理

- 订单列表

- 订单详情
