这个项目能做什么

# 项目概览 这是一个用 vue2 + vuex 编写的大型单页面应用示例，以饿了么外卖场景为素材，README 说明作者在业余时间从零开始布局到完成，历时约两个多月。项目定位偏向功能完整、逻辑复杂的实战练习，而非简单 demo。作者注明该项目与慕课网的饿了么课程项目无关，且项目纯属个人练习，正常下单应使用官方客户端。 # 技术栈 vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg。README 提示因涉及大量 ES6/7 新特性，node 需要 6.0 以上版本。 # 项目运行 ``` git clone https://github.com/bailicangdu/vue2-elm.git cd vue2-elm npm install 或 yarn(推荐) npm run dev ``` # 接口数据与配套项目 所有接口数据来自配套的后台系统 node-elm。若想体验前后台同时开发，可下载后台系统，此时启动命令为 `npm run local` 而不是 `npm run dev`。此外还提供了基于 element-ui 搭建的后台管理页面 vue2-manage。仅做前端开发时可忽略。README 也提到预览地址与接口需要使用 https 访问。 # 已实现的功能 - 定位功能 - 选择城市 - 搜索地址 - 展示所选地址附近商家列表 - 搜索美食、餐馆 - 根据距离、销量、评分、特色菜、配送方式等进行排序和筛选 - 餐馆食品列表页 - 购物车功能 - 店铺评价页面 - 单个食品详情页面 - 商家详情页 - 登录、注册 - 修改密码 - 个人中心 - 发送短信、语音验证 - 下单功能 - 订单列表 - 订单详情 - 下载 App - 添加、删除、修改收货地址 - 帐户信息 - 服务中心 - 红包 - 上传头像 未实现的功能：付款（README 中标注为“臣妾做不到啊”）。 # 项目结构 源码位于 src 目录，包含 components（common、footer、header 公共组件，如弹出框、购物车、倒计时、加载动画、评分星、餐馆列表、底部与头部组件）、config（env.js 环境切换、fetch.js 获取数据、mUtils.js 常用方法、rem.js 单位转换）、images、page（按业务划分的页面目录，如 balance、benefit、city、confirmOrder、download、find、food、forget、home、login、msite、order、points、profile、search、service、shop、vipcard）、plugins、router、service（getData.js 统一管理接口、tempdata 临时数据）、store（vuex 的 action、getters、index、modules、mutation-types、mutations）与 style（common.scss、mixin.scss、swiper.min.css）。根目录还有 build（webpack 配置）、config（打包路径）、elm（上线文件）、screenshots（截图）、App.vue、main.js、index.html 等。README 统计为 56 个目录、203 个文件。 # 作者总结与后续目标 README 提到涉及 money 的网页逻辑较复杂，商家与食品种类多、页面交互复杂，写购物车和下单时数据与逻辑比较头疼，且没有设计与接口 API 文档，只能逐步摸索；作者认为 vuex 在处理复杂交互逻辑时不可或缺，vue + vuex 完全可以做大型单页项目。后续目标包括：用 node.js 构建模拟外卖平台的后台系统、写出跨 Android 和 iOS 的原生 APP 版本，时间允许还会出卖家版本。 # 演示与许可 README 提供在线 demo 地址（建议用 Chrome 手机模式预览）与移动端二维码，并附有商铺列表页、商铺筛选页、餐馆食品列表与购物车、确认订单页、搜索页、登录页、个人中心等截图。项目交流可通过 Gitter 群组或 Issues/PR 参与。许可证为 GPL。