newbee-mall-vue3-app：🔥 🎉Vue3 全家桶 + Vant 搭建大型单页面商城项目，新蜂商城

newbee-mall-vue3-app是一款🔥 🎉Vue3 全家桶 + Vant 搭建大型单页面商城项目，新蜂商城 Vue3.2 版本，技术栈为 Vue3.2 + Vue-Router4.x + Pinia + Vant4.x。，项目在Gitee平台已累计获得1283个Star、473次Fork，基于JavaScript语言开发，采用Spring Boot、Vue、MySQL、Redis、Mybatis等主流技术栈。项目功能完善、文档齐全、社区活跃，无论是用于学习研究还是商业项目的二次开发，都是一个值得推荐的选择。

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 （新蜂商城）系列项目概览

坚持不易，如果觉得项目还不错的话可以给项目一个 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 版本的页面预览：

• 登录页

• 首页

• 商品搜索

• 商品详情页

• 购物车

• 生成订单

• 地址管理

• 订单列表

• 订单详情

感谢

• Vue
• Vue-Router
• Vuex
• Vant
• better-scroll