11# 前言
22
3- 初学vue时曾在网上搜索vue的实战项目源码,无奈大部分都是简单的demo,对于深究vue没有太大的帮助,剩下的一些大部分都是像音乐播放器之类的展示型项目,交互没有预期那么复杂。但我们实际在工作中,经常会遇到有购物车的项目,这类项目因为涉及到money,所以对逻辑严谨度要求高,页面之间交互复杂,又会伴随着登陆 、注册、用户信息等等,常常会让我们很头疼。既然还没人用vue写过这样的项目,那不如我来写,开源出来对能看到的人也会有帮助。
3+ 初学vue时曾在网上搜索vue的实战项目源码,无奈大部分都是简单的demo,对于深究vue没有太大的帮助,剩下的一些大部分都是像音乐播放器之类的展示型项目,交互没有预期那么复杂。但我们实际在工作中,经常会遇到有购物车的项目,这类项目因为涉及到money,所以对逻辑严谨度要求高,页面之间交互复杂,又会伴随着登录 、注册、用户信息等等,常常会让我们很头疼。既然还没人用vue写过这样的项目,那不如我来写,开源出来对能看到的人也会有帮助。
44
55这种功能性的项目很实用但是往往也很枯燥,没有音乐播放器那么看起来绚丽,思来想去发现饿了么是一个不错的素材,一来它足够复杂,开放的外卖平台比一般的公司独有商店更加复杂。二来 见到那么多美食,大家也不会感觉到厌烦。
66
77为啥是饿了么,而不是百度,美团?原因很简单,三个外卖大佬里,饿了么的色调和布局是最漂亮的,看起来最舒服。
88
9- 此项目大大小小共 45 个页面,涉及注册、登陆 、商品展示、购物车、下单等等,是一个完整的流程。一般公司即便是官网的单页面项目都没这么复杂,如果这个项目能驾驭的了,相信大部分公司的其他单页面应用也就不在话下,即便更复杂,也不会比这个高到哪里去。
9+ 此项目大大小小共 45 个页面,涉及注册、登录 、商品展示、购物车、下单等等,是一个完整的流程。一般公司即便是官网的单页面项目都没这么复杂,如果这个项目能驾驭的了,相信大部分公司的其他单页面应用也就不在话下,即便更复杂,也不会比这个高到哪里去。
1010
1111因为利用业余时间来做,年前就开始写,又跨个年,周期有点长,项目从零布局到完成共用了2个多月的时间,目前项目已经完成,正在进行一些性能的优化,增加详细的注释。
1212
@@ -24,7 +24,7 @@ vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg
2424
2525# 项目运行
2626
27- #### 注意:由于涉及大量的 ES6/7 等新属性,nodejs 必须是 6.0 以上版本 ,node 7 是先行版,有可能会出问题,建议使用 node 6 稳定版
27+ #### 注意:由于涉及大量的 ES6/7 等新属性,nodejs 必须是 6.0 以上版本 ,node 7 是先行版,有可能会出问题,建议使用 node 6 稳定版
2828
2929```
3030git clone https://github.com/bailicangdu/vue2-elm.git
@@ -75,7 +75,7 @@ npm run build
7575
7676# 关于 demo 与 数据 的说明🤔
7777
78- 1、下载代码运行后,因为开启了反向代理,可以获取真实的官方数据,最终可以进行下单(真实的下单,而不是模拟,下单后可以在官方App中查看并付款,亲自试过,且成功付款点餐),但是为了安全起见,登陆的帐号为固定的帐号 ,以免泄露个人信息,不过照样可以点餐。
78+ 1、下载代码运行后,因为开启了反向代理,可以获取真实的官方数据,最终可以进行下单(真实的下单,而不是模拟,下单后可以在官方App中查看并付款,亲自试过,且成功付款点餐),但是为了安全起见,登录的帐号为固定的帐号 ,以免泄露个人信息,不过照样可以点餐。
7979
80802、demo的数据为模拟的固定数据,只做为效果演示,因为反向代理必须在PC端运行代码才行。
8181
@@ -85,7 +85,7 @@ npm run build
8585#### (demo使用的是模拟数据,数据是固定的,只做为样式的演示,要获取真实的数据,请clone代码并运行);
8686
8787[ 查看demo请戳这里] ( http://test.fe.ptdev.cn/elm/ ) (请用chrome手机模式预览)
88-
88+
8989### 移动端扫描下方二维码
9090
9191![ ] ( https://github.com/bailicangdu/vue2-elm/blob/master/screenshots/elm_ewm.png )
@@ -106,7 +106,7 @@ npm run build
106106- [x] 店铺评价页面 -- 完成
107107- [x] 单个食品详情页面 -- 完成
108108- [x] 商家详情页 -- 完成
109- - [x] 登陆 、注册 -- 完成
109+ - [x] 登录 、注册 -- 完成
110110- [x] 修改密码 -- 完成
111111- [x] 个人中心 -- 完成
112112- [x] 发送短信、语音验证 -- 完成
@@ -119,7 +119,7 @@ npm run build
119119- [x] 服务中心 -- 完成
120120- [x] 红包 -- 完成
121121- [x] 上传头像 -- 完成
122- - [ ] 付款 -- 臣妾做不到啊~~
122+ - [ ] 付款 -- 臣妾做不到啊~~
123123
124124
125125
@@ -131,7 +131,7 @@ npm run build
131131
1321323、vue因其轻量级的框架在中小型项目中表现亮眼,在大型单页面应用中因为vuex的存在,表现依然出色,在处理复杂交互逻辑的时候,vuex的存在是不可或缺的。所以说利用 vue + vuex 完全可以去做大型的单页面项目。
133133
134- 4、项目写到现在,从 登陆注册到 、首页、搜索、商家列表、购物车、下单、订单列表、个人中心 一个流程走完之后、不但对vue的理解更深一层,而且对以后掌控大型项目的时候也有非常多的帮助,做一个实际的项目才能对自己有很大的提升。
134+ 4、项目写到现在,从 登录注册到 、首页、搜索、商家列表、购物车、下单、订单列表、个人中心 一个流程走完之后、不但对vue的理解更深一层,而且对以后掌控大型项目的时候也有非常多的帮助,做一个实际的项目才能对自己有很大的提升。
135135
1361365、曾一度怀疑,花几个月的时间做这样一个项目到底有没有意义,本来只是想做一个小项目练练手,没想到后来越写越多,不过坚持下来后我相信一切都是值得的。
137137
@@ -186,7 +186,7 @@ npm run build
186186<img src =" https://github.com/bailicangdu/vue2-elm/blob/master/screenshots/search.gif " width =" 365 " height =" 619 " />
187187
188188
189- ### 登陆页
189+ ### 登录页
190190
191191<img src =" https://github.com/bailicangdu/vue2-elm/blob/master/screenshots/login1.png " width =" 365 " height =" 619 " />
192192<img src =" https://github.com/bailicangdu/vue2-elm/blob/master/screenshots/login.gif " width =" 365 " height =" 619 " />
@@ -224,17 +224,17 @@ npm run build
224224| |-- mUtils.js // 常用的js方法
225225| |-- rem.js // px转换rem
226226| |-- images // 公共图片
227- | |-- pages
227+ | |-- pages
228228| |-- balance // 余额页
229229| |--children
230230| |--detail // 余额说明
231231| |-- benefit // 红包页
232232| |--children
233233| |--commend // 推荐有奖
234- | |--coupon // 代金券说明
235- | |--exchange // 兑换红包
236- | |--hbDescription // 红包说明
237- | |--hbHistory // 历史红包
234+ | |--coupon // 代金券说明
235+ | |--exchange // 兑换红包
236+ | |--hbDescription // 红包说明
237+ | |--hbHistory // 历史红包
238238| |-- city // 当前城市页
239239| |-- food // 食品筛选排序页
240240| |-- confirmOrder // 确认订单页
@@ -252,7 +252,7 @@ npm run build
252252| |-- find // 发现页
253253| |-- forget // 忘记密码,修改密码页
254254| |-- home // 首页
255- | |-- login // 登陆注册页
255+ | |-- login // 登录注册页
256256| |-- msite // 商铺列表页
257257| |-- order // 订单列表页
258258| |--children
@@ -278,14 +278,14 @@ npm run build
278278| |--children
279279| |--questionDetail // 问题详情
280280| |-- shop // 商铺筛选页
281- | |-- children
282- | |-- foodDetail // 商铺信息页
281+ | |-- children
282+ | |-- foodDetail // 商铺信息页
283283| |-- shopDetail // 单个商铺信息页
284- | |-- children
285- | |-- shopSafe // 商铺认证信息页
284+ | |-- children
285+ | |-- shopSafe // 商铺认证信息页
286286| |-- vipcard // 会员卡办理页
287- | |-- children
288- | |-- invoiceRecord // 购买记录
287+ | |-- children
288+ | |-- invoiceRecord // 购买记录
289289| |-- useCart // 使用卡号购买
290290| |-- vipDescription // 会员说明
291291|
0 commit comments