向“全栈”进发，大型线上商城实战项目，Spring Boot + Vue 前后端分离版本的商城来了（文末有视频）

新蜂商城 Vue 版本，它来了！（文末有视频）

如上图所示，新蜂商城 Vue 版本已经开发完成，这是新蜂商城开源项目的第一个大版本更新，根据大量的用户调研，最终决定将新蜂商城升级为 Spring Boot + Vue 两个流行技术栈的前后端分离商城，部分页面和功能都可以通过上图中的 9 张截图看出来。

Spring Boot 技术栈和 Vue 技术栈其实这些技术本身并不算特别大的难点，只要你愿意花时间去学，都能够掌握他们的基本用法，难点往往在于从 0 到 1 搭建一个完整的实践项目，以及项目开发过程中对于很多技术细节的再学习和处理，帮助读者具备开发和统筹一个完整项目的能力是此小册的目标，此小册将通过技术栈的详细讲解、多个功能模块的开发实践、并结合实际项目开发中的产品流程来完成这个任务。

一个可以实操练手的完整项目，再配备上详细的技术讲解手册，相信无论身处哪个技术领域，都是你提高自身技术水平最高效的工具，此小册将围绕 Spring Boot 和 Vue 两个目前比较流行的技术栈向大家呈现一个大型项目完整的开发流程，详见下图：

实践项目包含一个前后端分离的线上商城项目，功能模块包括：登录认证模块、首页商品推荐模块、商品分类模块、商品搜索模块、购物车模块、下单模块、收货地址管理模块、订单管理模块等。

小册比较偏向于项目实战，也具有很强的实操性，可以边读边实践。希望这本小册可以帮你答疑解惑，降低你的学习成本，让你既能够得到一份完整的实操项目，也能够帮你点满目前炽手可热的技能点，为你的技术深度和薪水职位的提升提供充足的保障。

本文是整个小册的开篇，主要分为以下几个部分：

• 新蜂商城介绍
• 新蜂商城 Vue 版项目预览
• Vue 技术栈介绍
• Spring Boot 技术栈介绍
• 小册知识点总览

新蜂商城介绍

新蜂商城项目是我在 GitHub 上开源的一个项目:

在 GitHub 上写一些开源项目，这件事情我做了三年多，从 2017 年的第一个 ssm-demo 开源项目，到 2019 年的 newbee-mall 新蜂商城项目，再到如今的 newbee-mall-vue-app 我也没想到能够一直坚持了下来。

至于为什么会写这个商城项目呢？大家通过我过往做的项目应该有一点清楚，一开始是做基础的 demo，后面是做一些小项目，之后也写过开源博客项目，由小项目到大项目，这是一个循序渐进的过程罢了，在三年时间里慢慢过渡，从无到有、由小至大，最终有了这样一系列的项目，至于为什么会选择走商城方向，主要是在几个交流群里和大家沟通过，貌似大家对商城类的项目更为感兴趣，所以就决定开发了它。

自从在网上写博客、在 GitHub 上开源了几个不值一提的小项目之后，很多朋友都会选择与我沟通，或者问我一些问题，这其中有相当一部分还是学生或者 1-3 年经验的朋友，通过与他们的沟通呢，我在写项目和想问题的时候也有所改变，目前做的几个项目都更注重一些基础的东西：别太麻烦、运行顺利、别缺代码。

回到项目本身，通过上面说的几点呢，相信大家也能够看出来，我就是想写一个能够让大部分人，即使是初学者或者在校大学生，都能够运行起来的开源商城项目。

于是，2019 年 10 月，新蜂商城就开源了。

紧接着，2020 年 5 月，新蜂商城 Vue 版本也开源了。

紧接着，2020 年 11 月，新蜂商城 Vue3 版本也开源了。

更多内容可以去仓库里查看，这里就不再占用篇幅了，新蜂商城项目源码在 GitHub 和国内的码云都创建了代码仓库，如果有人访问 GitHub 比较慢的话，建议在 Gitee 上查看该项目：

• newbee-mall in GitHub
• newbee-mall in Gitee

新蜂商城项目也优化了好几个版本了，主要是一些 bug 修复和功能优化，Vue 版本的代码升级是第一次的大版本更新，这个版本的项目源码也已经开源，开源地址为 github.com/newbee-ltd/…，项目部署的相关文档和注意事项大家可以参考：

• 后端部署：《项目初体验：启动新蜂商城后端 API 项目》。
• 前端部署：《新蜂商城前端 H5 开发环境搭建》。

项目预览

• 登录页

 

• 首页
• 

 

• 商品搜索

• 商品详情页

• 购物车

• 生成订单

• 地址管理

• 订单列表

• 订单详情

Vue 技术栈

Vue 框架不必多说，尤大的力作，在前端业界也算是一号“响当当”的框架。

当我在浏览器搜索关于 Vue 的实战课程时，能搜到的课程寥寥无几，多数是一些入门级别的教程，知识点非常零散，且数据形式都是通过 Mock 的形式模拟，很多同学是希望能模拟真实的后端接口数据实现一个完整的项目，基于这个需求，我开始思考能否通过一个实战课来为在读的学生和 1-3 年开发经验的朋友们做一套基于 Vue 的电商实战课。

三大前端框架的对比

“我到底学哪个框架才能找到更好的工作呢？”

这是很多初入职场的同学的疑问，在此我给大家对这三个框架做一个相对客观的分析。

• 我们先看看近一年时间 Vue、React、Angular 这三大前端框架的搜索情况

数据取自 Google Trends 从搜索的角度来看三个框架 Vue 受关注度较高，React 和 Angular 紧随其后。

• 再看看受关注的地域

数据取自 Google Trends

很明显，从受关注的国家来看，我国呈现一片蔚蓝，可以说明在国内和欧洲一带，Vue 的市场占有率还是非常可观的，国内的同学学习 Vue 势在必行。

• 从编程方式角度（指写代码的规范）

Vue:它对新手和初学者比较友好，只要你会 Html 和 CSS，基本上就能快速上手。因为它把模板、业务逻辑、样式都放在一个 .vue 文件内，写起来相对其他框架会比较舒服，但是一旦业务逻辑复杂的页面，代码就会比较臃肿。

React:它致力于组件化开发，宗旨是万物皆组件，页面基于组件的方式，像搭积木一样的形式进行开发。JSX 语法 相对学习成本也不会太高。

Angular:它是一个有作用域的框架，依赖注入和挂载都需要考虑到它的作用域。相对来说学习成本比较高。

新手可以先尝试入门 Vue，后期也可学习React，这样学习的曲线会平缓一些。

• 从历史版本方面考虑

Vue: 前期的 1.x 到后来的 2.x 实现虚拟 dom 的形式渲染。近期可能会出来 3.x 版本，我认为最大的期待应该是 3.x 会支持和 React 一样，通过 Class 类的形式去编写组件，升级方式还算是平滑，历史项目也不用做太大的改动。

React: 一直采用的是平滑升级的形式，15.4.2 版本以后废除的 createClass 的形式，到现在 16.x 推出全新的 Hooks 形式，用 Function 的方式进行组件的编写，但是不是强制让你使用，且能够兼容 Class 类的编写形式。

Angular: 1.x 版本的时候，它不叫 Angular，而是叫 AngularJS。以前它是使用 JS 去写的，后来 2.x 出来之后，是使用 TypeScript 写的，所以改名为 Angular。当初升级完之后失去了一批用户，理由我个人认为是因为还要重新学习一遍，与其重构项目还不如重新学一门新的框架，比如 Vue、 React。

• 从背景的角度考虑

Vue:最初是尤雨溪个人开发的项目，现在他作为阿里的技术顾问，也算是有阿里为其提供支持。

React:由脸书 Facebook 提供技术支持。

Angular:由全球知名的搜索引擎公司 Google 提供技术支持。

都是大厂，无需担心框架的生态和版本的稳定性。

• 从编译的角度考虑

Angular 和 Vue 都是通过模板的形式开发页面，那么有模板就会要解析模板，也就是说会消耗一段时间。反观 React 使用的是 JSX 语法，代码无需解析模板，而是解析 JS 便可，所以比 Angular 和 Vue 都少了一步，所以相对来说 React 在解析编译的时候会相对快一些。

我认为入门前端的新手可以先从 Vue 框架切入，通过这个切入点去熟悉整个前端的开发模式及周边技术，再有余力的话可以对 React 框架进行学习，毕竟目前的就业竞争日趋激烈，技多不压身。

答疑

学习完 Vue 的用法之后，我该如何制作一个属于自己的项目呢？

在学习完 Vue 之后，如果不进行实战夯实基础知识点，可能过几天之后慢慢的就忘记了 Vue 的语法，这也是非常困扰各位学习者的问题，费尽九牛二虎之力怎么能说忘就忘。

我本将心向明月，焉使明月照沟渠？

本教程使用的是最新的 Vue-Cli-4.x 构建项目、通过 postcss-px-to-viewport 实现移动端不同分辨率的适配、集成 Vant 移动端 UI 组件库、引进阿里妈妈的 iconfont 创建属于自己的字体图标库、 axios 网络请求库二次封装、 Vue-Router 原理的讲解、 Vuex 全局状态管理等等技术。

学完本教程之后，将它作为一个基准，在工作中遇到的问题，也能从此项目中借鉴一些思路。

一直为别人打下手，我也想从零开始，开发一个完整的前端项目。

没错，本教程最后会教大家将项目部署到真实服务器上，通过 pm2 做进程守护， Nginx 转发代理。大厂的运维和部署项目这块，可能会交给专业的运维人员进行维护。但在小厂穿梭才是大多数程序员的常态，小厂就不一定会有专业的运维，而需要前端接手部署项目这块内容。

为什么选择做电商的课程？

在我漫长的职业生涯中，也开发了不少项目，初入职场开发的项目就是类电商的书城项目。电商项目涉及的知识点覆盖面积比较广泛，如登录注册、底部导航栏、首页轮播图、首页顶部搜索栏、页面切换动效、分类侧边栏、购物车、地址栏的增删改等等。基本的业务逻辑也能覆盖到其他一些项目的需求，所以电商项目无疑是练手项目的首选。

Spring Boot 技术栈介绍

Spring Boot 已经成为每一位 Java 开发者在技术道路上打怪升级所必要的技能包。

关于 Spring Boot 技术栈，我在另外一本小册文章中已经介绍，这里就不再占用篇幅，大家可以自行点开并阅读：

后端技术选型之 Spring Boot

学完小册应有的收获

1、基础知识巩固

项目代码量可比肩真实电商项目，不乏各类 Vue 和 ES6+ 的各种语法，所以这里需要小伙伴们有一定的基础，学完后能对知识有一个全面的巩固。

2、统筹项目的组件化开发

抽取通用的组件，不做不必要的重复劳动。工作中为一起开发的小伙伴提供方便的组件，是可以提高工作效率的。项目中会抽取各类组件，教你父子组件和非父子组件间的传值等等。

3、良好的编程习惯

项目采用 eslint 严格要求编程格式，严格要求自己敲出高质量的代码。以及遇到问题该如何解决，而不是在微信群里东问西问，像只无头苍蝇。

4、学会部署项目到服务器

在结尾会涉及一些服务器的知识。同学们不能局限于前端。我曾经也觉得前端没必要学服务端相关的知识，但当我涉略之后，对整个软件开发的视野进入了新的纪元，考虑问题也不再局限于前端。

Vue 商城项目开发实战 - 程序员十三 - 掘金小册企业级大型电商系统，前后端分离商城实践，向全栈进发！(包含Vue3.x版本)。「Vue 商城项目开发实战」由程序员十三撰写，2030人购买https://s.juejin.cn/ds/ku1H1Yw/