[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8649":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":17,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":42,"readmeContent":43,"aiSummary":44,"trendingCount":16,"starSnapshotCount":16,"syncStatus":45,"lastSyncTime":46,"discoverSource":47},8649,"newbee-mall-vue3-app","newbee-ltd\u002Fnewbee-mall-vue3-app","newbee-ltd","🔥 🎉Vue3 全家桶 + Vant 搭建大型单页面商城项目，新蜂商城 Vue3.2 版本，技术栈为 Vue3.2 + Vue-Router4.x + Pinia + Vant4.x。","https:\u002F\u002Fitem.jd.com\u002F13785266.html",null,"Vue",6526,1584,74,6,0,3,8,67.9,"GNU General Public License v3.0",false,"main",true,[25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41],"newbee-mall","newbee-mall-vue3","pinia","spring-boot","vant","vant3","vant4","vue","vue-example","vue-mall","vue-router4","vue3","vue3-demo","vuejs","vuejs3","vuex","vuex4","2026-06-12 04:00:40","![](static-files\u002Fnewbee-mall.png)\n\n![Build Status](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fbuild-passing-green.svg)\n![Version 3.0.0](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fversion-3.0.0-yellow.svg)\n[![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-GPL3.0-blue.svg)](https:\u002F\u002Fgithub.com\u002Fnewbee-ltd\u002Fnewbee-mall-vue3-app\u002Fblob\u002Fmaster\u002FLICENSE)\n\nnewbee-mall 项目是一套电商系统，包括 newbee-mall 商城系统及 newbee-mall-admin 商城后台管理系统，基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。\n\n本仓库中的源码为新蜂商城前后端分离版本的 Vue 项目（Vue 版本为 3.x），主要面向前端开发人员，后端 API 源码在另外一个仓库 [newbee-mall-api](https:\u002F\u002Fgithub.com\u002Fnewbee-ltd\u002Fnewbee-mall-api)。\n\n新蜂商城 Vue3 版本线上预览地址：[http:\u002F\u002Fvue3-app.newbee.ltd](http:\u002F\u002F47.99.134.126:5008)，账号可自行注册，建议使用手机模式打开。\n\n## newbee-mall （新蜂商城）系列项目概览\n\n![newbee-mall-course-2023](https:\u002F\u002Fgithub.com\u002Fnewbee-ltd\u002Fnewbee-mall-cloud\u002Fraw\u002Fmain\u002Fstatic-files\u002Fnewbee-mall-course-2023.png)\n\n| 项目名称             | 仓库地址                                                     | 备注                                                         |\n| :------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |\n| newbee-mall          | [newbee-mall in GitHub](https:\u002F\u002Fgithub.com\u002Fnewbee-ltd\u002Fnewbee-mall)\u003Cbr>[newbee-mall in Gitee](https:\u002F\u002Fgitee.com\u002Fnewbee-ltd\u002Fnewbee-mall) | 初始版本、Spring Boot、Thymeleaf、MyBatis、MySQL             |\n| newbee-mall-plus     | [newbee-mall-plus in GitHub](https:\u002F\u002Fgithub.com\u002Fnewbee-ltd\u002Fnewbee-mall-plus)\u003Cbr\u002F>[newbee-mall-plus in Gitee](https:\u002F\u002Fgitee.com\u002Fnewbee-ltd\u002Fnewbee-mall-plus) | 升级版本、优惠券、秒杀、支付、Spring Boot、Thymeleaf、MyBatis、MySQL、Redis |\n| newbee-mall-cloud    | [newbee-mall-cloud in GitHub](https:\u002F\u002Fgithub.com\u002Fnewbee-ltd\u002Fnewbee-mall-cloud)\u003Cbr\u002F>[newbee-mall-cloud in Gitee](https:\u002F\u002Fgitee.com\u002Fnewbee-ltd\u002Fnewbee-mall-cloud) | 微服务版本、分布式事务、Spring Cloud Alibaba、Nacos、Sentinel、OpenFeign、Seata |\n| newbee-mall-api      | [newbee-mall-api in GitHub](https:\u002F\u002Fgithub.com\u002Fnewbee-ltd\u002Fnewbee-mall-api)\u003Cbr\u002F>[newbee-mall-api in Gitee](https:\u002F\u002Fgitee.com\u002Fnewbee-ltd\u002Fnewbee-mall-api) | 前后端分离、Spring Boot、MyBatis、Swagger、MySQL             |\n| newbee-mall-api-go   | [newbee-mall-api-go in GitHub](https:\u002F\u002Fgithub.com\u002Fnewbee-ltd\u002Fnewbee-mall-api-go)\u003Cbr\u002F>[newbee-mall-api-go in Gitee](https:\u002F\u002Fgitee.com\u002Fnewbee-ltd\u002Fnewbee-mall-api-go) | 前后端分离、Go、Gin、MySQL                                   |\n| newbee-mall-vue-app  | [newbee-mall-vue-app in GitHub](https:\u002F\u002Fgithub.com\u002Fnewbee-ltd\u002Fnewbee-mall-vue-app)\u003Cbr\u002F>[newbee-mall-vue-app in Gitee](https:\u002F\u002Fgitee.com\u002Fnewbee-ltd\u002Fnewbee-mall-vue-app) | 前后端分离、Vue2、Vant                                    |\n| newbee-mall-vue3-app | [newbee-mall-vue3-app in GitHub](https:\u002F\u002Fgithub.com\u002Fnewbee-ltd\u002Fnewbee-mall-vue3-app)\u003Cbr\u002F>[newbee-mall-vue3-app in Gitee](https:\u002F\u002Fgitee.com\u002Fnewbee-ltd\u002Fnewbee-mall-vue3-app) | 前后端分离、Vue3、Vue-Router4、Pinia、Vant4      |\n| vue3-admin           | [vue3-admin in GitHub](https:\u002F\u002Fgithub.com\u002Fnewbee-ltd\u002Fvue3-admin)\u003Cbr\u002F>[vue3-admin in Gitee](https:\u002F\u002Fgitee.com\u002Fnewbee-ltd\u002Fvue3-admin) | 前后端分离、Vue3、Element-Plus、Vue-Router4、Vite      |\n\n**坚持不易，如果觉得项目还不错的话可以给项目一个 Star 吧，也是对我一直更新代码的一种鼓励啦，谢谢各位的支持。**\n\n## 开发及部署文档\n\n- [开篇词：手把手带你搭建Vue3+Spring Boot大型前后端分离项目](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [项目须知和课程约定](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [2023年2月小册全新优化升级](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [全栈开发！你必须要知道的“前后端分离”](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [前端模块化的发展历史](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [传统页面和单页面的权衡与抉择](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [准备工作及基础环境搭建（后端）](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [Spring Boot 项目初体验--项目搭建及启动](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [项目编码简化利器！Spring Boot 整合 Lombok](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [Lombok 插件问题处理](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城后端项目启动和运行注意事项](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [VSCode 的相关配置及插件介绍](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [基础篇：Vue 指令](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [Vue3 新特性介绍](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [基础篇: CSS 预处理工具Less的介绍及使用](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [脚手架工具 Vite](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [Vue-Router 浅析原理及使用](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [全局状态管理插件 Pinia 简介及使用](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城前端 H5 开发环境搭建及项目启动](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [前后端交互文档利器！Spring Boot 整合 Swagger](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [接口参数处理和统一响应结果](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [口设计规范及接口调用实践](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城开发实战-用户登录接口开发](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城开发实战-用户身份认证详解](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城开发实战-首页模块接口开发](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城开发实战-分类模块接口开发](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城开发实战-商品搜索模块接口开发](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城开发实战-购物车模块接口开发](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城开发实战-个人信息及收货地址接口开发](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城开发实战-下单流程接口开发](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城开发实战-订单处理流程详解](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城移动端开发实战-新蜂商城底部导航(抽离公共组件)](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城移动端开发实战-新蜂商城登录注册页(前端鉴权)](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城移动端开发实战-商城首页制作(轮播图、首页商品列表)](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城移动端开发实战-商品分类页面制作(better-scrol的介绍及使用)](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城移动端开发实战-商品列表页面制作(无限滚动加载)](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城移动端开发实战-商品详情页面制作(Pinia 购物车数量全局管理)](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城移动端开发实战-商城购物车页面制作(购物车页)](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城移动端开发实战-确认订单页面制作](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城移动端开发实战-地址栏管理页面制作](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [商城移动端开发实战-我的订单页面制作](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n- [常见问题汇总讲解](https:\u002F\u002Fjuejin.im\u002Fbook\u002F6844733826191589390)\n\n## 联系作者\n\n> 大家有任何问题或者建议都可以在 [issues](https:\u002F\u002Fgithub.com\u002Fnewbee-ltd\u002Fnewbee-mall-vue3-app\u002Fissues) 中反馈给我，我会慢慢完善这个项目。\n\n- 我的邮箱：2449207463@qq.com\n- QQ技术交流群：932227898 552142710\n\n关注公众号：**程序员十三**，回复\"勾搭\"进群交流。\n\n![wx-gzh](https:\u002F\u002Fnewbee-mall.oss-cn-beijing.aliyuncs.com\u002Fwx-gzh\u002F%E7%A8%8B%E5%BA%8F%E5%91%98%E5%8D%81%E4%B8%89-%E5%85%AC%E4%BC%97%E5%8F%B7.png)\n\n## 软件著作权\n\n>本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！\n\n![](https:\u002F\u002Fnewbee-mall.oss-cn-beijing.aliyuncs.com\u002Fposter\u002Fstore\u002Fnewbee-mall-copyright-02.png)\n\n## 页面展示\n\n以下为新蜂商城 Vue3 版本的页面预览：\n\n- 登录页\n\n![](static-files\u002F登录.png)\n\n- 首页\n\n![](static-files\u002F首页.png)\n\n- 商品搜索\n\n![](static-files\u002F商品搜索.png)\n\n- 商品详情页\n\n![](static-files\u002F详情页.png)\n\n- 购物车\n\n![](static-files\u002F购物车.png)\n\n- 生成订单\n\n![](static-files\u002F生成订单.png)\n\n- 地址管理\n\n![](static-files\u002F地址管理.png)\n\n- 订单列表\n\n![](static-files\u002F订单列表.png)\n\n- 订单详情\n\n![](static-files\u002F订单详情.png)\n\n## 感谢\n\n- [Vue](https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fvue)\n- [Vue-Router](https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fvue-router-next)\n- [Vuex](https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fvuex\u002Ftree\u002F4.0)\n- [Vant](https:\u002F\u002Fgithub.com\u002Fyouzan\u002Fvant)\n- [better-scroll](https:\u002F\u002Fgithub.com\u002Fustbhuangyi\u002Fbetter-scroll)\n","newbee-mall-vue3-app 是一个使用 Vue3 全家桶和 Vant 搭建的大型单页面商城项目。该项目采用 Vue3.2 + Vue-Router4.x + Pinia + Vant4.x 的技术栈，提供了包括首页门户、商品分类、购物车、订单管理等在内的完整电商功能模块。其核心功能涵盖了从前端展示到用户交互的所有环节，并且通过 Pinia 进行状态管理，确保了应用的状态一致性与高效性。此项目非常适合需要构建现代化、响应式电商平台的前端开发人员学习参考或直接用于实际项目中，特别是对于希望利用最新 Vue 技术栈来提升用户体验和开发效率的团队而言。",2,"2026-06-11 03:19:07","top_language"]