# 前言
[README in English](README-en.md)
初学vue时曾在网上搜索vue的实战项目源码,无奈大部分都是简单的demo,对于深究vue没有太大的帮助,剩下的一些大部分都是像音乐播放器之类的展示型项目,交互没有预期那么复杂。但我们实际在工作中,经常会遇到有购物车的项目,这类项目因为涉及到money,所以对逻辑严谨度要求高,页面之间交互复杂,又会伴随着登录、注册、用户信息等等,常常会让我们很头疼。既然还没人用vue写过这样的项目,那不如我来写,开源出来对能看到的人也会有帮助。
这种功能性的项目很实用但是往往也很枯燥,没有音乐播放器那么看起来绚丽,思来想去发现饿了么是一个不错的素材,一来它足够复杂,开放的外卖平台比一般的公司独有商店更加复杂。二来 见到那么多美食,大家也不会感觉到厌烦。
为啥是饿了么,而不是美团?原因很简单,饿了么的色调和布局是最漂亮的,看起来最舒服。
此项目大大小小共 45 个页面,涉及注册、登录、商品展示、购物车、下单等等,是一个完整的流程。一般公司即便是官网的单页面项目都没这么复杂,如果这个项目能驾驭的了,相信大部分公司的其他单页面应用也就不在话下,即便更复杂,也不会比这个高到哪里去。
因为利用业余时间来做,年前就开始写,又跨个年,周期有点长,项目从零布局到完成共用了2个多月的时间。
另外,这个项目和慕课网视频的那个饿了么没有任何关系,慕课网的项目只有一个页面,我在看完vue的官方文档后直接写了这个项目,没有参照任何人的代码,请大家不要混为一谈。
__注1:此项目纯属个人瞎搞,正常下单请选择饿了么官方客户端。__
__注2:项目预览地址和接口需要使用https访问哦!__
## 技术栈
vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg
## 项目运行
#### 注意:由于涉及大量的 ES6/7 等新属性,node 需要 6.0 以上版本
```
cd vue2-elm
npm install 或 yarn(推荐)
npm run dev
```
## 关于接口数据
此项目的所有接口数据都来源于配套的后台系统,[后台项目传送地址](node-elm)。
如果想体验前后台同时开发,可以下载后台系统。
此时启动本项目的命令为:npm run local 而不是 npm run dev。
同时我们也提供了基于`element-ui`搭建的[后台管理页面](vue2-manage)
如果只做前端开发,请忽略上面这几句话哟~
# 效果演示
[查看demo请戳这里](https://cangdu.org/elm/)(请用chrome手机模式预览)
# 目标功能
- [x] 定位功能 -- 完成
- [x] 选择城市 -- 完成
- [x] 搜索地址 -- 完成
- [x] 展示所选地址附近商家列表 -- 完成
- [x] 搜索美食,餐馆 -- 完成
- [x] 根据距离、销量、评分、特色菜、配送方式等进行排序和筛选 -- 完成
- [x] 餐馆食品列表页 -- 完成
- [x] 购物车功能 -- 完成
- [x] 店铺评价页面 -- 完成
- [x] 单个食品详情页面 -- 完成
- [x] 商家详情页 -- 完成
- [x] 登录、注册 -- 完成
- [x] 修改密码 -- 完成
- [x] 个人中心 -- 完成
- [x] 发送短信、语音验证 -- 完成
- [x] 下单功能 -- 完成 ✨✨🎉🎉
- [x] 订单列表 -- 完成
- [x] 订单详情 -- 完成
- [x] 下载App -- 完成
- [x] 添加、删除、修改收货地址 -- 完成
- [x] 帐户信息 -- 完成
- [x] 服务中心 -- 完成
- [x] 红包 -- 完成
- [x] 上传头像 -- 完成
- [ ] 付款 -- 臣妾做不到啊~~
# 总结
1、一般涉及到money的网页逻辑都比较复杂,尤其像饿了么这样一个开放的平台,商家和食品种类繁多,页面与页面之间交互复杂,在写到 购物车 和 下单 功能时众多的数据和逻辑一度让人很头疼,又没有设计和接口api文档,只能一步步摸索。
2、vue因其轻量级的框架在中小型项目中表现亮眼,在大型单页面应用中因为vuex的存在,表现依然出色,在处理复杂交互逻辑的时候,vuex的存在是不可或缺的。所以说利用 vue + vuex 完全可以去做大型的单页面项目。
3、项目写到现在,从 登录注册到、首页、搜索、商家列表、购物车、下单、订单列表、个人中心 一个流程走完之后、不但对vue的理解更深一层,而且对以后掌控大型项目的时候也有非常多的帮助,做一个实际的项目才能对自己有很大的提升。
4、曾一度怀疑,花几个月的时间做这样一个项目到底有没有意义,本来只是想做一个小项目练练手,没想到后来越写越多,不过坚持下来后我相信一切都是值得的。
5、项目已经完成,共45个页面。
# 项目布局
```
.
├── build // webpack配置文件
├── config // 项目打包路径
├── elm // 上线项目文件,放在服务器即可正常访问
├── screenshots // 项目截图
├── src // 源码目录
│ ├── components // 组件
│ │ ├── common // 公共组件
│ │ │ ├── alertTip.vue // 弹出框组件
│ │ │ ├── buyCart.vue // 购物车组件
│ │ │ ├── computeTime.vue // 倒计时组件
│ │ │ ├── loading.vue // 页面初始化加载数据的动画组件
│ │ │ ├── mixin.js // 组件混合(包括:指令-下拉加载更多,处理图片地址)
│ │ │ ├── ratingStar.vue // 评论的五颗星组件
│ │ │ └── shoplist.vue // msite和shop页面的餐馆列表公共组件
│ │ ├── footer
│ │ │ └── footGuide.vue // 底部公共组件
│ │ └── header
│ │ └── head.vue // 头部公共组件
│ ├── config // 基本配置
│ │ ├── env.js // 环境切换配置
│ │ ├── fetch.js // 获取数据
│ │ ├── mUtils.js // 常用的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
�
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
商城管理系统源码,包含三部分: 1、node-elm 商城后台系统,提供数据。 技术栈:nodejs + express + mongodb + mongoose + es6/7 + vue + element-ui 2、vue2-manage 商城后台系统前端,跟node-elm是配套的 技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + less + element-ui 3、vue2-elm 商城客户端前端,从node-elm获取数据 技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg
资源推荐
资源详情
资源评论
收起资源包目录
vue + element-ui+nodejs 商城管理系统源码.rar (382个子文件)
.babelrc 234B
.babelrc 171B
.babelrc 97B
COPYING 18KB
COPYING 18KB
COPYING 18KB
app.85873a69abe58e3fc37a13d571ef59e2.css 142KB
swiper.min.css 17KB
app.css 2KB
app.css 2KB
项目说明.docx 1.06MB
.editorconfig 147B
.editorconfig 146B
home.ejs 119B
.eslintignore 29B
.eslintrc 95B
shop_cart-big.gif 2.61MB
confirmOrder-big.gif 1.56MB
shop_cart.gif 1.55MB
food-big.gif 1MB
confirmOrder.gif 959KB
msite-big.gif 727KB
food.gif 727KB
msite.gif 515KB
search-big.gif 455KB
profile-big.gif 370KB
search.gif 308KB
login-big.gif 286KB
profile.gif 195KB
login.gif 134KB
.gitignore 207B
.gitignore 184B
.gitignore 159B
.gitignore 83B
.gitignore 70B
.gitignore 51B
.gitkeep 0B
index.html 34KB
index.html 962B
index.html 858B
index.html 696B
index.html 476B
index.html 152B
favicon.ico 17KB
favicon.ico 9KB
favicon.ico 9KB
elmlogo.jpeg 6KB
sheng.jpeg 1KB
jifen.jpeg 1KB
avator.jpg 50KB
default.jpg 4KB
vendor.22faa6a1913df07d3952.js 620KB
0.dea7087f7a00b4016329.js 353KB
2.5f437a7efe16a33fe1e4.js 291KB
cities.js 269KB
1.4b6299d2e3b0bc5dca41.js 234KB
msite.2eee2d17d8671351f05d.min.js 184KB
vendor.js 168KB
vendor.js 160KB
shop.440be25e5885b83e0413.min.js 140KB
questionDetail.7ee7dae0bc795c56ee11.min.js 128KB
swiper.min.js 95KB
food.7c6617f794f61733a96e.min.js 64KB
app.js 57KB
app.js 57KB
orderDetail.3206313b787236449e3a.min.js 55KB
hbDescription.94665e36403279dbec1f.min.js 52KB
confirmOrder.228b254aa88e6d9b7e3a.min.js 49KB
hbHistory.03546eb2fa69c1a630da.min.js 49KB
order.2770ca2dc8eb4238d516.min.js 47KB
benefit.d1dc45208fb664c7b4c9.min.js 47KB
chooseAddress.d5b44edc46332cf918a4.min.js 45KB
shopSafe.b318fd9212bcd2275b07.min.js 38KB
info.2a442fca44d182eb890d.min.js 34KB
profile.c94591d7ff320dcc3a8a.min.js 32KB
search.e4669212b6069f98ed2f.min.js 28KB
commend.af5ebaf2c2395ef19929.min.js 27KB
explain.js 25KB
login.1fa54fe830d2e0c7ca39.min.js 25KB
pointsDetail.c8be0bcca4fe6d90bed1.min.js 24KB
balanceDetail.74246e2daa361a86aab3.min.js 24KB
coupon.f1f66aa34b8c761600af.min.js 24KB
payment.e6f799f65b8fa1e749fd.min.js 23KB
points.bfc3e4b1f074dac36e22.min.js 22KB
balance.37dbad39c161c27bff91.min.js 22KB
foodDetail.3346421a69b0ed589715.min.js 22KB
remark.4cf6594fd8669dec3d4a.min.js 22KB
forget.b08d4c7b82f001a9a771.min.js 22KB
download.35b0b538aef43c426bac.min.js 21KB
addAddress.2e2c4085bbddef3a43d3.min.js 21KB
add.a9933136c86a2f0e783a.min.js 19KB
find.ad4b62c63cbd0f256081.min.js 18KB
shopDetail.cb3f3ec86ce0801c1bd1.min.js 17KB
vipcard.f1567128a2d3c580ddd6.min.js 17KB
exchange.900252b54d810dc240f4.min.js 17KB
userValidation.1053f76dd4d6d52f262a.min.js 17KB
useCart.fa8966a13e200afc37b1.min.js 16KB
10.3e8f9c037e5098ffaf76.js 15KB
11.ef8e6cb57a82667e3714.js 15KB
6.7dc76f41f558da8b23ac.js 15KB
共 382 条
- 1
- 2
- 3
- 4
资源评论
javascript_good
- 粉丝: 89
- 资源: 68
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功