使用vue2+vuex+router重写饿了么点餐系统和vue插件简析

author author     2023-03-31     679

关键词:

参考技术A vue有自己的脚手架构建工具vue-cli,使用起来非常方便,使用webpack来集成各种开发便捷工具,比如:

代码热更新,修改代码之后网页无刷新改变,对前端开发来说非常的方便

PostCss,再也不用去管兼容性的问题了,只针对chrome写css代码,会自动编译生成支持多款浏览器的css代码

Eslint,统一代码风格,规避低级错误,对于有代码洁癖的人来说是绝对的好东西,不过有些地方的代码校验有时候也挺麻烦的-.-

bable,ES2015出来已经有一段时间了,但是不少浏览器还没有兼容ES6.有了bable,放心使用ES6语法,它会自动转义成ES5语法。

Stylus,类似于SASS/SCSS,但是可以不写和“:”,使用起来还是很方便的



除此之外,vue-cli已经使用node配置了一套本地服务器和安装命令等,本地运行和打包只需要一个命令就可以搞定,非常的方便

开发

vue非常好的融合了react的组件化思想和angular的指令思想。

一个vue的组件将HTML、CSS、JS代码写在一个文件里面,这样既方便编写,也方便管理和修改

Axios

在vue1.x的时候,vue的官方推荐HTTP请求工具是vue-resource,但是在vue2.0的时候将推荐工具改成了axios。

使用方式都差不多,但需要注意的是:接口返回的res并不直接是返回的数据,而是经过axios本身处理过的json对象。真正的数据在res.data里:

axios.get(url).then((res)=>

this.data = res.data

)

Vuex

vue提供了一个数据管理工具vuex,有点类似于angular中factory和service,可以进行数据上的通信。

比如存储一些公共变量或者是不同组件间的数据处理等。

这个有一些高级用法在这里不细说,想要了解的可以去官方文档看,有中文版本。

const store = new Vuex.Store(

state:

count: 0

,

mutations:

increment(state)

state.count++





)

Vue-Router

vue-router是vue的路由系统,可以用来创建单页应用。基本思想是在主页面中引入标签,然后定义路由,把router挂在到app上,然后把各个子页面渲染到view里面。使用起来还是很方便的,

跳转页面只需要

router.push('test')

获取元素节点

vue2.0废除了v-el指令,所有的节点指令修改为ref,然后通过ref来获取元素节点,如

<div ref="testHook">test</div>

...js code

this.$ref.testHook

组件间的通信

一。如果是和子组件通信,则使用ref就可以实现,如:

<test ref="testHook"></test>

...js code

this.$ref.testHook.add() //调用test子组件的add方法

二。使用emit来发送广播

vue2提供了一套广播机制,即一边发送广播,一边接收广播来执行相应操作。使用方法如下:

比如想要给test组件发送一个“相加”广播:

export default

method:

click()

Vue.$emit('add',) //第二个参数可作为传递数据传送到监听端口,不需要则传空对象







那么test组件中就需要监听,在created方法里写

export default

created()

Vue.$on('add',this.add)

,

method:

add()

this.count++







除了以上总结的这点小的知识点以外,还有很多vue的知识想要和大家分享,以后会陆续写出来,大家感兴趣的也可以来我的GitHub一起来写这个项目(觉得不错的给个star Hah)
参考技术B 一起来SegmentFault 头条阅读和讨论SimonZhangITer分享的技术内容《使用vue2+Vuex+Router重写饿了么点餐系统和vue插件简析》

基于vue2+nuxt构建的高仿饿了么(2018版)(代码片段)

...API接口文档接口文档地址(基于apidoc)技术栈vue2+vuex+vue-router+mint-ui+nuxt项目运行gitclone[email protec 查看详情

??基于vue2+vuex+vue-router构建的移动端微应用(代码片段)

vue-mobile-starterViewREADMEinEnglish基于vue2+vuex+vue-router构建的移动端单页微应用,适合于vue2、vuex、vue-router核心概念的理解与掌握。前言做这个项目的初衷其实很简单,我司之前一直用angular、react进行PC端项目的开发,但是最近新开展... 查看详情

vue2高仿饿了么app

Github地址: https://github.com/ccyinghua/appEleme-project 一、构建项目所用:vueinitwebpackappEleme-projectnpmrundevcnpminstallnode-sass--save-devcnpminstallsass-loader--save-dev//sass-loader依赖于node-sas 查看详情

vue2+cli3实战项目-饿了么

...址:Vue2+Cli3实战项目-还原饿了么订餐app项目截图:我们使用npm安装一些包的时候可能会比较慢,这时候我们可以使用cnpm,cnpm是中国NPM镜像。cnpm是一个完整npmjs.org镜像,你可以用此代替官方版本(只读),同步频率目前为10分钟一... 查看详情

饿了么基于vue2.0的通用组件开发之路(分享会记录)

 Element:一套通用组件库的开发之路Element是由饿了么UED设计、饿了么大前端开发的一套基于Vue2.0的桌面端组件库。今天我们要分享的就是开发Element的一些心得。官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ... 查看详情

【css动画】饿了么加入购物车抛物线动画实现

...酷的动画,如下图饿了么点餐动画:所以百度了一下前端使用css实现这个效果,然后就自己就照葫芦画瓢的写了一个小小的demo,完全当作学习了一把。在界面上,我是参考了图片上的界面,写的css,然后在美团上面扒的数据。... 查看详情

vue2+vuex+vue-router快速入门项目搭建(代码片段)

...很好的配合 webpack 或 browserify 模块打包器使用。我们的项目使用 webpack 进行打包。项 查看详情

仿饿了么购物车下单效果

仿饿了么购物车下单效果前一段由于新项目需要,开发一个类似饿了么购物车下单效果,电商类、外卖类、点餐类项目都可以用的上,废话不多说请看效果。效果图如下:主要的功能:就是左侧展示分类,右侧展示分类下商品的,... 查看详情

结合项目学习vue2(路由vue-router,状态管理vuex)

前期:index.html<divid="app"><h1>{{intro}}</h1><router-view></router-view></div> app.jsvarApp=newVue({router,//router:router的缩写//传一个路由属性给 Vue 实例,路由现在被定义 查看详情

初学vue,vue2.0+vue-router+vuex的小项目

...:Todos功能:待办事项的增删改查,学习vuex的思想,充分使用了mountain和action,引入了charts做的图表分析,支持拖拽排序和滑动设置说明:因为没有时间搭建后台服务,直接用的locaStroge做的数据存储,也就没有用到axios,设置页... 查看详情

饿了么android版下拉筛选效果是如何实现的呢

选择首行,然后:数据——筛选——自动筛选,就可以了参考技术A最简单有效的法,用代码画一条出来,加在framelayout里就ok了 参考技术B1、点餐按钮点击动画2、利用二次贝塞尔曲线做成下单特效 参考技术C没明白你说的什么意... 查看详情

vue2.0使用总结中......

1.多使用和阅读Vue的全家桶,如(vue,vuex,vux,vue-router,vue-touch,vue-resource,vue-weui......),避免所有的功能模块全由自己重写,节省开发的效率并能够站在巨人的肩膀上规划前端的架构2.Vue2.0已经废弃1.0的ready钩子函... 查看详情

vue2.x实战之后台管理系统开发(代码片段)

...台管理系统项目运用了如下框架/插件:Vue2.x——项目所使用的js框架,我所使用的版本是:2.1.10vue-router2——Vue2.x配套路由,我所使用的版本是:2.3.0Element——UI框架,饿了么出品,我所使用的版本是:1.2.8Echarts——图表插件,... 查看详情

vue2.0的通用组件

 Element:一套通用组件库的开发之路Element是由饿了么UED设计、饿了么大前端开发的一套基于Vue2.0的桌面端组件库。今天我们要分享的就是开发Element的一些心得。官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ... 查看详情

饿了么账户异常怎么解决?

...下再试试。或者将手机关机重启一下也可。4、若是用户使用饿了么在下单的时候提示账户异常无法使用 查看详情

[self.tableviewscrolltorowatindexpath:]方法滑动崩溃(代码片段)

业务场景如下:类似美团、饿了么点餐界面的分类与菜品联动当分类中某一个分类下面菜品数量为零时,点击此分类,导致程序Crash解决办法:[self.tableViewscrollToRowAtIndexPath:[NSIndexPathindexPathForRow:NSNotFoundinSection:0]atSc... 查看详情

vue2+vuex+vue-router快速入门vue实例介绍(代码片段)

vue实例介绍  vue实例分两种,一种为组件实例,另外一种为根实例。组件实例负责创建个性化组件、而根实例负责把组件渲染到指定的真实的DOM结构中。并且vue为我们提供了一种特殊的文件格式 .vue 来创建 组件实... 查看详情

android-recycleview的双向列表左右联动效果

...A有一个需求,需要做一个左右双向联动的列表。类似于饿了么点餐页面,但是远没有那么复杂,只是用于展示的一个页面。只用了两个RecycleView加适配器,没有调用Fragment。(另加RecycleView中Item的,点击改变颜色,点击其他项改... 查看详情