用vue制作饿了么首页(1)

无论是静态网页还是动态交互网页，实现原则是将他们分块，然后各个击破。

很明显的饿了么首页分为三个部分（组件），

上面的头部（商家信息），

中间路由

购物车

每部分先占住自己位置，然后挨个将这三部分分别实现完整。

我理解的vue里，index.html好比是车轱辘，main.js就好比是变速箱，App.vue就好比是汽车方向盘和档把子，其他各个组件就好比是方向盘上的喇叭，转向等等，一环扣一环的关系。

我们操作是方向盘，就是写App.vue里的各种组件。当然引入一些工具文件时候别忘了在main.js里写引入，像router，mock，vuex等

写三个模板，分别对应头，路由和购物车，并在App.vue里引入他们。

路由也巨简单，最平常的就能搞定，佩佩路径和模板，别忘了写model：“history”，在路由组件里引入。

至此，大架子达成。

接下来，丰满血肉。

引入axios

转载于:https://www.cnblogs.com/dangdanghepingping/p/9932031.html

用vue制作饿了么首页(1)相关推荐

vue结合饿了么_Vue.js 高仿饿了么外卖app 全套_IT教程网
资源名称:Vue.js 高仿饿了么外卖app 全套资源目录: vue仿饿了么视频全套全套资源 │ files.txt │ project.zip │ resource.zip │ ├─第01 ...
flask 检测post是否为空_用Flask和Vue制作一个单页应用（五）
使用POST向后台发送数据 Flask app修改可以直接使用现有的路由处理函数来接收前端发来的数据,server/app.py中的all_res()修改如下: @app.route('/resou ...
英语阅读推荐：使用AJAX+WF+LINQ制作Google IG式首页
如果你既想学习ASP.NET AJAX,又想学习Windows Workflow Foundation,还想学习LINQ(包括DLinq和XLinq),能够一次过满足你三个愿望的除了Kinder出奇蛋 ...
vue仿饿了么点餐手机端
vue仿饿了么点餐手机端模板,包括评论,商品,商家模块,添加商品到购物车,左侧分类计数功能,右侧滑动时分类有上推功能,小球飞入购物车功能.
移动端vue实现部门结构功能_基于Vue制作组织架构树组件
编程之家收集整理的这篇文章主要介绍了基于Vue制作组织架构树组件,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 由于公司业务需求,需要开发一个展示组织架构的树组件(公司的项目是基于Vu ...
Vue仿饿了么app项目总结
前言这是我的第一个基于Vue项目的作品,目的是把之前的前端知识累积加上目前流行的前端框架,以项目的形式展示出来. 大家在学习Vue的时候,可以将此项目作为学习Vue框架的一个模板 Vue仿饿了么ap ...
前端Vue制作日历插件FullCalendar
前端Vue制作日历插件FullCalendar 官方文档:https://fullcalendar.io/ 效果图安装 Vue2:npm install --save @fullcalendar/v ...
(vue+【饿了么UI】tag组件封装)
(vue+[饿了么UI]tag组件封装) 根据项目所衍生的一种tag组件,废话不多说直接上代码 <template> <div><d ...
vue制作日历_如何使用Vue制作每月日历
vue制作日历 Have you ever seen a calendar on a webpage and thought, how the heck did they did that? For ...

用vue制作饿了么首页(1)

用vue制作饿了么首页(1)相关推荐

最新文章

热门文章