Vue开源:vue-meituan - 基于Vue全家桶制作的的高仿美团APP

熊猫仙 7年前
   <h2>美团外卖APP</h2>    <p>项目演示地址: <a href="/misc/goto?guid=4959754489397104814" rel="nofollow,noindex">http://39.108.232.27:9000</a></p>    <p>基于 Vue 全家桶 (2.x) 制作的美团外卖APP ,一个媲美原生的移动端外卖 App,项目完整、功能完备、UI美观、UE一流。</p>    <p><img src="https://simg.open-open.com/show/3ea536b8cf552bce358d84b6f57fa1ce.gif"></p>    <h2>技术栈</h2>    <p>【前端】</p>    <ul>     <li>Vue:构建用户界面的 MVVM 框架,核心是响应的数据绑定和组系统件</li>     <li>vue-router:为单页面应用提供的路由系统,项目上线前使用了路由懒加载技术,来异步加载路由优化性能</li>     <li>vuex:Vue 集中状态管理,在多个组件共享某些状态时非常便捷</li>     <li>vue-resource:服务端通讯,项目后期改用  axios</li>     <li>axios:服务端通讯。基于  Promise  的网络请求插件</li>     <li>vue-lazyload:第三方图片懒加载库,优化页面加载速度</li>     <li>better-scroll:iscroll 的优化版,使移动端滑动体验更加流畅</li>     <li>Mint UI:一套基于 Vue 2.0 的移动端组件库,出自饿了么前端</li>     <li>Sass(Scss):css 预编译处理器</li>     <li>ES6:ECMAScript 新一代语法,模块化、解构赋值、Promise、Class 等方法非常好用</li>     <li>Moment.js:日期时间格式化插件</li>    </ul>    <p>【后端及数据库】</p>    <ul>     <li>Node.js:利用 Express 起一个本地测试服务器</li>     <li>Express:一个自身功能极简,完全是由路由和中间件构成一个的WEB开发框架</li>    </ul>    <p>【自动化构建及其他工具】</p>    <ul>     <li>vue-cli:Vue 脚手架工具,快速初始化项目代码</li>     <li>ESLint:代码风格检查工具,规范代码书写</li>     <li>pm2:一个带有负载均衡功能的Node应用的进程管理器,此项目用于在阿里云服务器启动服务</li>    </ul>    <h2>收获</h2>    <ul>     <li>对 vue 的组件、指令、选项、模版渲染、事件绑定、计算属性等有了一定了解</li>     <li>了解了 vue 组件之间的交互、传值</li>     <li>熟悉了在 vue 项目中使用第三方插件(组件)</li>     <li>熟悉了组件化、模块化的开发思维</li>     <li>熟悉了 vue-router 控制路由和子路由的方式</li>     <li>熟悉项目开发流程:项目分析设计 -> 项目环境搭建 -> 依赖安装 -> 页面架构设计 -> 组件开发 -> 测试联调 -> 发布上线</li>     <li>总结了一套 Vue 通用组件,可以在其它项目中复用的 10+ 个组件</li>     <li>总结了一套常用的 SCSS mixin 库</li>     <li>总结了一套常用的 JS 工具函数库</li>     <li>体会到组件化、模块化开发带来的便捷</li>     <li>体会到将对象封装成类(ES6 class) 的便捷性,以及利用工厂方式初始化类实例</li>     <li>学会利用过渡效果及动画效果制作良好的用户交互体验</li>    </ul>    <h2>实现细节</h2>    <p>主要功能:首页、商家模块、发现、订单、我的</p>    <h3>首页</h3>    <p>首页数据 mock 美团移动端数据 - <a href="/misc/goto?guid=4959754489494753891" rel="nofollow,noindex">接口</a></p>    <h3>商家模块</h3>    <p>该页面主要实现了点餐、商品评价、商家信息预览等功能,内置购物车</p>    <p>数据通过 axios 异步请求获取,前期使用 mock 数据,后期抓取xx数据</p>    <p>公告浮层中使用了移动端经典的 CSS-Sticky-Footer 布局:关闭按钮被挤下去</p>    <p>公告浮层设计了淡入淡出效果,并使用了针对 IOS 用户的渐进增强效果: backdrop-filter</p>    <p>导航栏解决移动端1像素边框问题,并设计了通用 mixin</p>    <p>下面三个部分使用嵌套子路由实现:</p>    <p>点餐:</p>    <ul>     <li>布局上采用嵌套 Flex 布局。</li>     <li>滚动效果借助  better-scroll  滚动插件实现。</li>     <li>实现了左右菜单联动效果:右侧滚动,左侧对应菜单高亮,左侧点击,右侧滚动到对应区域。</li>     <li>设计了迷你购物车组件</li>     <li>利用 css 过度动画实现了购物车加减动态效果</li>     <li>利用 js 钩子实现了加入购物车飞行小球效果</li>    </ul>    <p>评价:</p>    <ul>     <li>复用  star 、 cross-line 、 ratings-select  等组件,体会到组件化开发的便捷性</li>    </ul>    <p>商家:</p>    <ul>     <li>借助  better-scroll  实现了横向滚动和纵向滚动效果</li>     <li>收藏功能使用  localstorage  本地存储,并设计了通用 store 方案</li>    </ul>    <h2>TODO</h2>    <ol>     <li>做一个node服务端,配合mongodb,实现商品的上下架、用户的登录注册等功能</li>     <li>丰富各个模块的深度</li>    </ol>    <h2>Build Setup</h2>    <pre>  # clone the repo into your disk.  $ git clone https://github.com/bxm0927/vue-meituan.git    # install dependencies  $ npm install    # serve with hot reload at localhost:8080  $ npm run dev    # build for production with minification  $ npm run build</pre>    <h2>License</h2>    <p>The code is available under the <a href="/misc/goto?guid=4959666937945223778" rel="nofollow,noindex">MIT license</a> .</p>    <p><img src="https://simg.open-open.com/show/0418c3d9d216e0be665570484cf0bc72.png"></p>    <p>项目主页:<a href="http://www.open-open.com/lib/view/home/1505306729959">http://www.open-open.com/lib/view/home/1505306729959</a></p>    <p> </p>    <p> </p>