## 更新（2019/6/5） ## 项目已经发布一年多的时间，vue-cli已经升级到3.0，很多依赖也都更新了导致项目跑不起来，这里简单的把项目升级到vue-cli3版本，接下来准备发布小程序版本的，感谢大家的支持。 ## 关于 ## 2019届大三学生，前段时间一直想一个人单独开发一个较为完整的项目，在众多应用中，考虑之后选择了美团外卖来模仿，这段时间就利用课余时间进行开发，前端用vue+vuex+vue-router+axios，因为需要用到定位和支付等功能，需要后端配合，而且想要做真正数据交互，所以用express(基于nodejs的框架)做后台，数据库用NOSQL的mongodb。 前端项目包含20多个路由，涉及到vue文件有40个，功能设计登录，定位，浏览商品，加购物车，下订单，支付(支持微信和支付宝的扫码支付和调起app支付)，评价，个人信息更改，是一个较为完整的项目。 ### 注意：此项目为个人开发实践练习，不作为任何商业用途 ## 社区地址   掘金地址：>[https://juejin.im/post/5aca46e2f265da238c3af4ca](https://juejin.im/post/5aca46e2f265da238c3af4ca)   思否地址：>[https://segmentfault.com/a/1190000014267516?utm_source=index-hottest](https://segmentfault.com/a/1190000014267516?utm_source=index-hottest) ## 功能 ## - 登录/注销 - IP定位 - 搜索地址 - 获取商店(计算当前位置和商店的距离) - 加购物车 - 下订单 - 支付(支持微信和支付宝的扫码支付和调起app支付) - 评价 - 头像上传(用了七牛云存储) - 图片懒加载 ## 技术栈 ## - Webpack-cli搭建项目 - Vue全家桶(vue+vuex+vue-router) - CSS预处理器SCSS - axios与后端进行请求数据 - 七牛云存储图片 - 支付宝和微信支付 - 使用better-scroll滚动 - Express搭建后端服务 - Mongoose对MongoDB进行便捷操作 - 使用Charles抓取数据 ## 效果演示 ### 主界面 ###  ### 定位和搜索 ###  ### 扫码支付 ###  ### APP支付 ###  ### 我的购物车 ###  ### 清除购物车 ###  ### 评论 ###  ### 其它 ###  ### 还有一些其它功能就不放图了哈 ### ## 线上地址 ## http://39.108.3.12 请用谷歌浏览器然后开启移动端浏览，如果要调用APP支付就需要用手机自带浏览器打开，然后支付时选择调起APP支付 ## 说明    后端项目地址：>[GitHub：https://github.com/zwStar/meituan-backend](https://github.com/zwStar/meituan-backend) ## 未完待续 ## 还有商家管理PC端还没写完，等写完再开源出来 ## 项目部署 阿里云 CentOS 7.4 64位 ## 项目运行 ``` 项目运行之前，请确保系统已经安装以下应用 1、node 2、mongodb ``` ``` git clone https://github.com/zwStar/vue-meituan.git cd vue-meituan npm install npm run serve 访问: http://localhost:8080 (确保后端项目服务已开启) ``` # 项目布局 ``` . ├── api 后端接口 ├── config.js 运行配置 ├── assets 静态资源 ├── components 全局组件 ├── router 路由 ├── store vuex ├── styles 全局样式 ├── views 页面 ├── App.vue 入口页面 ├── main.js 入口 ├── .babelrc babel-loader 配置 ├── .gitignore git 忽略项 ├── favicon.ico favicon图标 ├── index.html html模板 └── package.json package.json . ``` ## 写在最后 ## 因为还是学生，平时最多也是和同学一起开发，并没有参与过真正的企业团队开发，所以应该有很多地方做的不是很好，欢迎各位大佬们给我提一些意见。 如果有问题，您可以在 Issues 中提问哈。 如果您对这个项目感兴趣，请Star支持下，谢谢！ # License MIT # 打赏 如果觉得这个项目对你有帮忙，可以请我喝杯奶茶哈 微信： <img src="https://github.com/zwStar/vue-meituan/blob/v2.0/screenshots/weChat.jpg" width="275" alt="微信"/> 支付宝： <img src="https://github.com/zwStar/vue-meituan/blob/v2.0/screenshots/alipay.jpg" width="275" alt="支付宝"/>