返回目录
开源项目其他开源工具类新手

GitHub - newbee-ltd/newbee-mall-vue-app: 🔥 🎉Vue2 全家桶 + Vant 搭建大型单页面商城项目。新蜂商城前后端分离版本-前端Vue项目源码

newbee-mall 项目是一套电商系统,包括 newbee-mall 商城系统及 newbee-mall-admin 商城后台管理系统,基于 Spring Boot 2.X 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。 本仓库中的源码为新蜂商城前后端分离版本的 Vue

0 次阅读2026/08/18 发布
GitHub - newbee-ltd/newbee-mall-vue-app: 🔥 🎉Vue2 全家桶 + Vant 搭建大型单页面商城项目。新蜂商城前后端分离版本-前端Vue项目源码 来源图片

社区作者 · zZz

它解决什么问题

newbee-mall 项目是一套电商系统,包括 newbee-mall 商城系统及 newbee-mall-admin 商城后台管理系统,基于 Spring Boot 2.X 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。

本仓库中的源码为新蜂商城前后端分离版本的 Vue 项目(Vue 版本为 2.x),主要面向前端开发人员,后端 API 源码在另外一个仓库 newbee-mall-api 。

新蜂商城 Vue 版本线上预览地址: http://vue-app.newbee.ltd ,账号可自行注册,建议使用手机模式打开。

前后端分离版本包括四个仓库:

  • 新蜂商城后端接口 newbee-mall-api
  • 新蜂商城 Vue2 版本 newbee-mall-vue-app
  • 新蜂商城 Vue3 版本 newbee-mall-vue3-app
  • 新蜂商城后台管理系统 Vue3 版本 vue3-admin

Vue2 版本与 Vue3 版本分成两个仓库,大家需要哪个版本就去对应的仓库即可。

坚持不易,如果觉得项目还不错的话可以给项目一个 Star 吧,也是对我一直更新代码的一种鼓励啦,谢谢各位的支持。

关注公众号: 程序员十三 ,回复"勾搭"进群交流。

开发及部署文档

  • 向“全栈”进发!大型线上商城实战项目,Spring Boot + Vue 前后端分离版本的商城来了!
  • 项目须知和课程约定
  • 全栈开发!你必须要知道的“前后端分离”
  • 前端模块化的发展历史
  • 传统页面和单页面的权衡与抉择
  • 准备工作及基础环境搭建(后端)
  • Spring Boot 项目初体验--项目搭建及启动
  • 项目编码简化利器!Spring Boot 整合 Lombok
  • Lombok 插件问题处理
  • 商城后端项目启动和运行注意事项
  • VSCode 的相关配置及插件介绍
  • 基础篇:Vue 指令
  • 基础篇:Vue全局API及生命周期介绍
  • 基础篇: CSS 预处理工具Less的介绍及使用
  • Vue 脚手架工具 Vue-Cli 配置介绍
  • Vue-Router 浅析原理及使用
  • 全局状态管理插件 Vuex 介绍及使用
  • 商城前端 H5 开发环境搭建及项目启动
  • 前后端交互文档利器!Spring Boot 整合 Swagger
  • 接口参数处理和统一响应结果
  • 口设计规范及接口调用实践
  • 商城开发实战-用户登录接口开发
  • 商城开发实战-用户身份认证详解
  • 商城开发实战-首页模块接口开发
  • 商城开发实战-分类模块接口开发
  • 商城开发实战-商品搜索模块接口开发
  • 商城开发实战-购物车模块接口开发
  • 商城开发实战-个人信息及收货地址接口开发
  • 商城开发实战-下单流程接口开发
  • 商城开发实战-订单处理流程详解
  • 商城移动端开发实战-新蜂商城底部导航(抽离公共组件)
  • 商城移动端开发实战-新蜂商城登录注册页(前端鉴权)
  • 商城移动端开发实战-商城首页制作(轮播图、首页商品列表)
  • 商城移动端开发实战-商品分类页面制作(better-scrol的介绍及使用)
  • 商城移动端开发实战-商品列表页面制作(无限滚动加载)
  • 商城移动端开发实战-商品详情页面制作(Vuex 购物车数量全局管理)
  • 商城移动端开发实战-商城购物车页面制作(购物车页)
  • 商城移动端开发实战-确认订单页面制作
  • 商城移动端开发实战-地址栏管理页面制作
  • 商城移动端开发实战-我的订单页面制作
  • Vue 3.x 新特性概览
  • 新蜂商城迁移至 Vue 3.x 流程讲解

联系作者

大家有任何问题或者建议都可以在 issues 中反馈给我,我会慢慢完善这个项目。

  • QQ技术交流群:932227898 719099151 796794009 552142710

软件著作权

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

页面展示

以下为新蜂商城 Vue 版本的页面预览:

  • 登录页
  • 首页
  • 商品搜索
  • 商品详情页
  • 购物车
  • 生成订单
  • 地址管理
  • 订单列表
  • 订单详情

感谢

  • Vue
  • Vant
  • vue2-verify
  • better-scroll
  • Vuex

— 本文由 AI 根据公开来源辅助整理,命令、版本与许可证请在使用前到原始页面复核。

安装 / 开始使用

开发及部署文档

联系作者 大家有任何问题或者建议都可以在 issues 中反馈给我,我会慢慢完善这个项目。

软件著作权 本系统已申请软件著作权,受国家版权局知识产权以及国家计算机软件著作权保护! 页面展示 以下为新蜂商城 Vue 版本的页面预览:

感谢

  • 向“全栈”进发!大型线上商城实战项目,Spring Boot + Vue 前后端分离版本的商城来了!
  • 项目须知和课程约定
  • 全栈开发!你必须要知道的“前后端分离”
  • 前端模块化的发展历史
  • 传统页面和单页面的权衡与抉择
  • 准备工作及基础环境搭建(后端)
  • Spring Boot 项目初体验--项目搭建及启动
  • 项目编码简化利器!Spring Boot 整合 Lombok
  • Lombok 插件问题处理
  • 商城后端项目启动和运行注意事项
  • VSCode 的相关配置及插件介绍
  • 基础篇:Vue 指令
  • 基础篇:Vue全局API及生命周期介绍
  • 基础篇: CSS 预处理工具Less的介绍及使用
  • Vue 脚手架工具 Vue-Cli 配置介绍
  • Vue-Router 浅析原理及使用
  • 全局状态管理插件 Vuex 介绍及使用
  • 商城前端 H5 开发环境搭建及项目启动
  • 前后端交互文档利器!Spring Boot 整合 Swagger
  • 接口参数处理和统一响应结果
  • 口设计规范及接口调用实践
  • 商城开发实战-用户登录接口开发
  • 商城开发实战-用户身份认证详解
  • 商城开发实战-首页模块接口开发
  • 商城开发实战-分类模块接口开发
  • 商城开发实战-商品搜索模块接口开发
  • 商城开发实战-购物车模块接口开发
  • 商城开发实战-个人信息及收货地址接口开发
  • 商城开发实战-下单流程接口开发
  • 商城开发实战-订单处理流程详解
  • 商城移动端开发实战-新蜂商城底部导航(抽离公共组件)
  • 商城移动端开发实战-新蜂商城登录注册页(前端鉴权)
  • 商城移动端开发实战-商城首页制作(轮播图、首页商品列表)
  • 商城移动端开发实战-商品分类页面制作(better-scrol的介绍及使用)
  • 商城移动端开发实战-商品列表页面制作(无限滚动加载)
  • 商城移动端开发实战-商品详情页面制作(Vuex 购物车数量全局管理)
  • 商城移动端开发实战-商城购物车页面制作(购物车页)
  • 商城移动端开发实战-确认订单页面制作
  • 商城移动端开发实战-地址栏管理页面制作
  • 商城移动端开发实战-我的订单页面制作
  • Vue 3.x 新特性概览
  • 新蜂商城迁移至 Vue 3.x 流程讲解
  • 我的邮箱: [email protected]
  • QQ技术交流群:932227898 719099151 796794009 552142710
  • 登录页
  • 首页
  • 商品搜索
  • 商品详情页
  • 购物车
  • 生成订单
  • 地址管理
  • 订单列表
  • 订单详情
  • Vue
  • Vant
  • vue2-verify
  • better-scroll
  • Vuex

来源教程配图

教程配图
配图 1 · 教程配图查看原图
newbee-mall-info
配图 2 · newbee-mall-info查看原图
wx-gzh
配图 3 · wx-gzh查看原图
教程配图
配图 4 · 教程配图查看原图
教程配图
配图 5 · 教程配图查看原图
教程配图
配图 6 · 教程配图查看原图
教程配图
配图 7 · 教程配图查看原图
教程配图
配图 8 · 教程配图查看原图

适用场景

学习研究
开源项目实践