基于VUE的前后端分离商城系统

最新推荐文章于 2025-05-20 17:29:50 发布

June_Soda

最新推荐文章于 2025-05-20 17:29:50 发布

阅读量2.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端实战项目文章标签： vue es6 html5 javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_37155582/article/details/110114648

前端实战项目专栏收录该内容

2 篇文章

订阅专栏

这是一个用vue-cli4搭建的前后端分离商城项目，运用了Vue、Vuex、ES6等前端技术，包含首页、详情页等模块。通过该项目可学习Vue相关技术的使用、组件封装、模块化开发等，还能了解项目开发流程与调试方法，适合Vue实战练手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录

2. 通过项目能够学到什么

3. 项目部分截图展示

4.github地址（https://github.com/Sodaxiang/supermall.git）

如有帮助，请在github上给个star，非常感谢~不足的地方，欢迎大家在评论区留言讨论。

1.项目简介

该项目为使用vue-cli4搭建的一个前后端分离的商城项目；
使用了Vue，Vuex，Vue-Router,ES6，Axios以及Webpack等前端技术；
主要包含商城首页，详情页，购物车，商品分类，个人中心等模块；
项目涉及vue-lazyload, better-scroll相关运用。

2. 通过项目能够学到什么

Vue，Vuex，Vue-Router，Axios，Webpack的熟悉使用，使用vue-cli脚手架工具初始化Vue项目；
组件封装（如轮播图，导航栏的统一封装等），模块化开发，工程化思想；
项目开发的基本流程以及调试方法（devtools的使用）；
学会使用vue-lazyload实现图片懒加载，使用better-scroll实现页面的滚动效果等。

3. 项目部分截图展示

1）首页

主要包括5个部分：顶部导航栏，轮播图，分类，流行推荐，商品部分。

2）详情页

主要包括7个部分：商品轮播图，商品信息，商家信息，商品图片，商品参数，商品评论以及推荐商品。

3）购物车

主要包括2个部分：购物车商品以及结算：涉及的点为商品选中与全选的设置。

4）分类页

主要包括左边的主分类与右边的子分类

4.github地址（https://github.com/Sodaxiang/supermall.git）

项目非常适合Vue实战练手，能够有效提升以及理解对Vue的综合运用以及组件化，模块开发以及工程化思想。
如有帮助，请在github上给个star，非常感谢~不足的地方，欢迎大家在评论区留言讨论。

评论 3

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。