低仿饿了么H5-纯前端Vue版+手把手教学

原创 hbxywdk 教程 vue 3707阅读 2017-03-03 08:32:40 举报
这是一个低仿饿了么H5的纯前端练手,数据是伪造的,写的比较粗糙,写这个的目的是为了加深一下熟练度,半年前看到别人写的仿cnodejs网站,我也用vue1仿了cnodeJs的网站,当时写的也是粗糙的令人发指,在线预览:https://hbxywdk.github.io/vue-cnodeJs/#!/
半年过去,工作中很少有机会用上vue,vue也早已更新到2.+,想想学了不用也是白学了,恰好年后离了职,也没有再着急找工作,开启了夜里不睡觉的修仙模式(#滑稽),没事看着小说,想起来了就撸撸代码,日子过的也是惬意,憋了许久终于把东西憋了出来。
代码地址:https://github.com/hbxywdk/eleme-vue2
预览点这里:https://hbxywdk.github.io/eleme-vue2-static/#/

网页是有假的账户密码的部分页面需要登录 ↓ ,最好在Chrome手机模式下浏览。

username:admin
password:admin
本地预览步骤

javascript 代码

本人水平一般,如果你已经对vue很了解,那么看看预览就好不用继续阅读,如果你知道vue,想学习一下,可以继续看下去。
使用到的相关库或工具:vue2 + vuex2 + vue-router2 + vue-swipe + vue-cli

默认大家都已安装Node.js,且知道基础的ES6语法。

首先需要安装vue-cli,vue-cli是一个快速搭建vue项目的工具,就不需要我们一行一行写webpack配置了。

javascript 代码

// 初始化一个项目
javascript 代码

javascript 代码

得到以下目录结构

html 代码

src为项目代码所在文件夹

手动添加vuex。(Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)

javascript 代码

在src目录下创建store.js

javascript 代码

state为状态数据,触发action,mutations会去改变state的值,getters对外提拱state的值。

修改main.js。(main.js为webpack打包入口文件)

computed 写入 asd () {return this.$store.getters.getCount} ,通过vuex的getters就可得到state中的count,并在当前文件夹中以 asd 存在。
methods 中写入 this.$store.dispatch('setCount', arg), 执行change 方法会触发action ,改变count值为233,state值改变,computed 就会改变当前asd的值,template中也会相应改变。
更多vuex用法详见:https://vuex.vuejs.org/zh-cn/intro.html

Vue-router。(vue-router通常用于制作单页面应用,如其名就是给vue使用的路由,不清楚路由的可以百度一下)

在components文件夹中新建几个我们要用到的 .vue 文件,直接复制默认的Hello.vue文件即可,重命名并修改其中的不需要的内容。

修改router/index.js

javascript 代码

我们引入空白组件,并定义路由,当访问对应路径时,如localhost:8080/#/business,App.vue中的<router-view></router-view>就会展示对应内容,做到无刷新跳转。path: '/business/:id',后面的 :id 则是要传递的参数,组件中可以this.$route.params.id得到其值。

template中用<router-link>来跳转,<router-link> 默认会被渲染成一个 <a> 标签 <router-link to="/business/123">Go to Foo</router-link>,js中可用router.replace(location)来进行跳转。

更多用法详见http://router.vuejs.org/zh-cn/essentials/getting-started.html

下面进入到代码部分

整个项目使用 rem 方式布局,根据屏幕的宽度来自适应不同手机屏幕。
数据为伪造。
首页 Homepage.vue

javascript 代码

由于是纯前端页面,故使用setTimeout模拟下数据的加载,展示加载动画,computed中使用mapGetters来得到state中的数据,这样写与this.$store.getters.getCount实质上没有什么区别,但需要得到的数据较多时能少写不少代码。(使用前需引入)

导航部分使用 Vue-swipe 插件,https://github.com/ElemeFE/vue-swipe

商家列表部分,因为数据是伪造的,只有五个商家数据,所以这里用简单的复制,来做出加载更多的效果。

Business.vue(商家详情页)

javascript 代码

商家详情页占一整屏,最外层不允许出现滚动条,分上下两部分,上半部分给固定rem高度,下半部分高度动态计算,屏幕大小改变再次计算,下半部分,左右各一个ul列表,设置高度100%,overflow-y:auto;超出即可滚动。

左右列表
右ul滚动监控所有标题行的offsetTop,对比当前ul的scrollTop,给左ul添加对应样式。点击左列表,来控制右列表滚动。

购物车
data中定义一个购物车对象{ },添加某样商品时,已存在就+1,不存在则添加属性,每次添加计算总价等相关数据。

添加商品的抛球效果
每次添加获得点击按钮的坐标与目标位置的坐标,算得高度差值,利用初中物理,水平方向匀速运动,垂直方向垂直上抛运动,并添加向下的重力,即可得到抛球效果。

结算
结算时将当前购物车中计算出的简略信息添加到state中,清空购物车,跳转路由。

其他几个页面基本只是展示功能这里也就不再赘述。

现在是早上7:25,从凌晨4:00写到现在也是写的有点长了,其中废话颇多,能看到这里也是对我半夜忙活的肯定,也请大神不要吐槽我的代码水平。不过虽然啰嗦,但也对的起标题中的手把手教学了!

如果想要更详细的内容,可以直接阅读代码,内有更详细的注释。

这个练习,还有许多不够完善的地方,比如抛球效果以及各处细节,目前也没有想到更好的,如果你有也请告诉我。有机会的话我会完善这些不足并为其加上node的后台。

如果你愿意,可以给我一个大大的star,Thanks!

评论 ( 14 )
最新评论
hbxywdk 13F 2017-03-21 19:23:06 14F

vertical-align: middle;

158746586812920 2017-03-19 19:39:35 13F

楼主class里的v-md是什么

640930128 2017-03-09 17:50:07 12F

有没有要交流的朋友?

阿波罗D波 2017-03-06 13:18:16 11F

666

hbxywdk 2017-03-04 17:38:23 10F

最近在看这个:使用 Express + MongoDB 搭建多人博客https://github.com/nswbmw/N-blog,学完了有机会做个假的后台。嗯,都是假的,连我自己也是假的,哈哈~

hbxywdk 6F 2017-03-04 17:31:41 9F

车祸现场~
,你的这个我看过,做的很不错
,我做的比较糙,后台也不太懂,只能自己做几个纯前端页面玩玩~,还有很多像你学习的地方!

cangdu 6F 2017-03-04 16:42:45 8F
陈陈陈大文 2017-03-04 11:28:29 7F

辛苦了

cangdu 2017-03-04 11:06:51 6F

兄弟,撞车啦

方本领 2017-03-04 09:52:16 5F

向楼主学习,我也喜欢玩vue 不懂的可以请教你

hbxywdk 1F 2017-03-03 09:48:24 4F

水平太低,惭愧

hbxywdk 2F 2017-03-03 09:46:32 3F

谢谢~

fantasy525 2017-03-03 09:42:37 2F

已给star

fantasy525 2017-03-03 09:22:10 1F

给力,能否留个联系QQ方便以后交流vue.