一个巨大的前端开发资源清单，含vue购物车实战项目源码开源
这是一个巨大的前端开发资源清单，该项目包含为前端开发人员精心挑选的资源集合，从架构到UI组件都在这个项目中，它涵盖了广泛的前端技术。刚开始学习vue的时候，在网上查找vue实战项目的源码，很可惜大部分都是简单的demo，对深入研究vue没什么太大作用，剩余的一些大多是像音乐播放器这类展示型项目，其交互没有预想的那么复杂。但在我们实际工作中，经常会碰到有购物车的项目，这类项目由于涉及金钱，所以对逻辑严谨程度要求很高，页面之间的交互复杂，还会伴随登录、注册、用户信息等情况，常常令我们十分头疼。既然还没有人用vue编写过这样的项目，那么不如我来编写，将其开源出来对能看到的人也会有帮助。
这种功能性项目很实用，却往往很枯燥，不如音乐播放器那般看起来绚丽，想来想去，发现饿了么是个不错的素材，一方面它足够复杂，开放的外卖平台比一般公司独有的商店更复杂，另一方面，看到那么多美食，大家也不会厌烦。
为什么选择饿了么，而非美团呢？理由十分简单，饿了么的色调相当漂亮，饿了么的布局也极为美观，其整体看起来让人感觉最为舒适。
此项目包含众多页面，数量多达45个，涵盖注册、登录、商品展示、购物车、下单等内容，构成一个完整流程。通常情况下，一般公司就连官网的单页面项目都不会如此复杂。要是能驾驭这个项目，那么相信大部分公司的其他单页面应用也能轻松应对。即便遇到更复杂的情况，其复杂程度也不会比这个项目高出太多。
由于是利用业余时间开展，所以年前便着手撰写，还经历了跨年，时间周期有些长，该项目从零基础规划直至完成，总共耗费了2个多月的时间。
另外，这个项目与慕课网视频中的饿了么毫无关联，慕课网的项目仅有一个页面，我在看完vue的官方文档后便直接编写了这个项目，没有参考任何人的代码，请大家不要将它们混淆 。
整个项目分成两部分，一部分是前台项目接口，另一部分是后台管理接口，这两部分加起来共有60多个。项目涉及登陆，涉及注册，涉及添加商品，涉及商品展示，涉及筛选排序，涉及购物车，涉及下单，涉及用户中心等，这些共同构成一个完整的流程。
技术栈
关于接口数据
此项目的所有接口数据，其来源都是配套的后台系统，是后台项目的传送地址。
如果想体验前后台同时开发，可以下载后台系统。
此时启动本项目的命令是：npm run local ，并非 npm run dev 。
同时我们也提供了基于-ui搭建的后台管理页面
如果只做前端开发，请忽略上面这几句话哟～
效果演示
查看demo请戳（请用手机模式预览）
移动端扫描下方二维码
目标功能部分截图商铺列表页
商铺筛选页
餐馆食品列表与购物车
确认订单页
搜索页
登录页
个人中心
项目布局
<p><pre class="syl-page-code"> <code>.
这是webpack配置文件所在的目录，其中包含build文件夹 。
这是项目打包路径中的config文件夹 。
上线项目文件，名为elm，放置在服务器上就能正常访问。
项目的截图
这里是源码目录
组件
这里有一个文件夹，其名称为common，它属于公共组件类别
弹出框组件，名为alertTip.vue
购物车组件，名为buyCart.vue
计算时间的组件，名为computeTime.vue
页面初始化时，用于加载数据的动画组件，名为loading.vue
组件混合，其中包括指令-下拉加载更多，以及处理图片地址，相关内容在mixin.js文件中
评论的五颗星组件，名为 ratingStar.vue
它是msite和shop页面的餐馆列表公共组件，名为shoplist.vue
│ │ ├── footer
底部公共组件，即footGuide.vue
│ │ └── header
头部公共组件，名为head.vue
https://img2.baidu.com/it/u=3975699435,1279690467&fm=253&fmt=JPEG&app=138&f=JPEG?w=1054&h=500
这是基本配置，它位于config文件夹下
env.js，用于环境切换配置。
获取数据的fetch.js文件
这是一个存放常用js方法的文件，名为mUtils.js
rem.js，用于px转换rem
这里是公共图片存放的地方，名为images
│ ├── page
│ │ ├── balance
余额页，对应的文件是balance.vue
│ │ │ └── children
余额说明，对应的文件是detail.vue
│ │ ├── benefit
红包页，名为benefit.vue
│ │ │ └── children
推荐有奖，对应的文件是commend.vue
把长句拆分成多个小分句，用逗号隔开。不要遗漏句子末尾的标点符号。其中，有一个文件名为coupon.vue，它是用于代金券说明的
兑换红包的页面为exchange.vue
红包说明，hbDescription.vue文件
这是历史红包相关的文件，名为hbHistory.vue
│ │ ├── city
把长句拆分成多个小分句，用逗号隔开，不要遗漏句子末尾的标点符号。，当前城市页，city.vue，
│ │ ├── confirmOrder
│ │ │ ├── children
│ │ │ │ ├── children
添加地址的页面，名为addAddress.vue
请你明确一下具体需要改写的句子内容呀，目前只给出了“children”，没有完整的句子可供改写呢。
搜索地址页，即searchAddress.vue
选择地址的页面，名为chooseAddress.vue
发票.vue，此为选择发票页
付款页，其文件名为payment.vue
订单备注页面，名为remark.vue
用户验证页面，名为userValidation.vue
确认订单页面，名为confirmOrder.vue
│ │ ├── download
下载App对应的文件为download.vue
│ │ ├── find
发现页，对应的文件是find.vue
│ │ ├── food
食品筛选排序页，名为food.vue
│ │ ├── forget
这是忘记密码、修改密码的页面，文件名为forget.vue
│ │ ├── home
它是首页 。
│ │ ├── login
登录注册页，名为login.vue
│ │ ├── msite
商铺列表页，对应的文件是msite.vue
│ │ ├── order
│ │ │ ├── children
订单详情页，即orderDetail.vue
订单列表页，名为order.vue
│ │ ├── points
│ │ │ ├── children
积分说明，对应的文件是detail.vue
积分页，即points.vue
│ │ ├── profile
│ │ │ ├── children
│ │ │ │ ├── children
https://img0.baidu.com/it/u=1154019339,199691952&fm=253&fmt=JPEG&app=138&f=PNG?w=961&h=500
地址，对应的文件是address.vue
│ │ │ │ │ └── children
新增地址的相关文件为add.vue
请你明确一下具体需要改写的句子内容，仅给出“│ │ │ │ │ └── children”，无法进行准确改写。
把长句拆分成多个小分句，用逗号隔开，不要遗漏句子末尾的标点符号，不要换行，不要任何解释，保持原文风格，去掉最前面的序号，禁止修改专有名词，禁止穿插英文单词，只要改写结果，不要复述原句。
帐户信息，对应的文件是info.vue
这是设置用户名的文件，文件名为 setusername.vue，其作用是重置用户名 。
个人中心，对应的文件是profile.vue
│ │ ├── search
搜索页，对应的文件是search.vue
│ │ ├── service
│ │ │ ├── children
问题详情，存于名为questionDetail.vue的文件中
服务中心，对应的文件是service.vue
│ │ ├── shop
│ │ │ ├── children
│ │ │ │ ├── children
商铺认证信息页，即 shopSafe.vue
foodDetail.vue，这是商铺信息页
单个商铺信息页，即 shopDetail.vue
商铺筛选页面，名为 shop.vue
│ │ └── vipcard
│ │ ├── children
发票记录.vue，用于购买记录
使用卡号进行购买的页面，名为useCart.vue
这是vipDescription.vue文件，用于会员说明
这是会员卡办理页面，名为vipcard.vue
引用的插件，存放在plugins文件夹中
│ ├── router
这是一个名为router.js的文件，用于路由配置。
数据交互的统一调配，通过service来实现
它是获取数据的统一调配文件，负责对接口进行统一管理，名为getData.js
这是开发阶段的临时数据，存放在tempdata文件夹中
这是vuex的状态管理中的store部分
配置actions，对应的文件是action.js
配置getters，文件名为getters.js
引用vuex，通过它来创建store，相关代码存于index.js文件中
这是存放store模块的地方，名为modules
它用于定义常量muations名，名为mutation-types.js
配置mutations，对应的文件是mutations.js
│ └── style
公共样式文件，名为common.scss
样式配置文件，名为mixin.scss
│ └── swiper.min.css
这是页面入口文件，名为App.vue
程序入口文件是main.js，它负责加载各种公共组件。
favicon.ico，即图标
入口html文件，名为index.html
.
56 directories, 203 files</code></pre></p>
需要源码地址.请私信我。在线就立马回大家。
页:
[1]