Vue.js高仿饿了么WebApp
介绍
学习Vue.js也有一阵子了,为了加深对Vue的理解及运用,做了一个小项目。这是一个高仿饿了么外卖WebApp,现已完成商品预览、商品详情、商家预览、添加购物、查看评论等功能。
部分截图



项目预览

技术栈
虽然项目较小,但常用的技术工具均有使用,本项目对于vue初学者来说,难度适宜,可以从中学到各种工具的运用,若能独立完成此项目,对自动化构建vue项目将有很大帮助。正在学习Vue的同学,不妨亲手试试吧。本项目使用到的技术栈有:
- MVVM框架:Vue.js(2.x)
 - 状态管理:Vuex
 - 前端路由:Vue-router
 - 服务端通讯:axios
 - 滚动插件:iscroll
 - 构建工具:webpack
 - css预处理:stylus
 
说明
线上预览版本数据为mock数据,未使用axios从服务器端获取,若想了解axios在本项目中的使用,可fork本项目并clone到本地查看。
上文中已贴出源码地址,供有兴趣的同学查看,欢迎star或fork。
Vue.js高仿饿了么WebApp的更多相关文章
- vue.js高仿饿了么(前期整理)
		
1.熟悉项目开发流程 需求分析——>脚手架工具——>数据mock——>架构设计——>代码编写——>自测——>编译打包. 2.熟悉代码规范 从架构设计.组件抽象.模块 ...
 - 【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(三)
		
前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_el ...
 - 基于vue2+nuxt构建的高仿饿了么(2018版)
		
前言 高仿饿了么,以nuxt作为vue的服务端渲染,适合刚接触或者准备上vue ssr的同学参考和学习 项目地址如遇网络不佳,请移步国内镜像加速节点 效果演示 查看demo请戳这里(请用chrome手 ...
 - Vue2.0仿饿了么webapp单页面应用
		
Vue2.0仿饿了么webapp单页面应用 声明: 代码源于 黄轶老师在慕课网上的教学视频,我自己用vue2.0重写了该项目,喜欢的同学可以去支持老师的课程:http://coding.imooc.c ...
 - 用vue2 +vue-router2 + es6 +webpack 高仿饿了么app(干货满满)
		
#高仿饿了么app商家详情 (vue2 +vue-router2 + es6 +webpack ) ##demo [demo 地址](http://liangxiaojuan.github.io/ ...
 - Vuejs 高仿饿了么外卖APP 百度云视频教程下载
		
Vuejs 高仿饿了么外卖APP 百度云视频教程下载 链接:https://pan.baidu.com/s/1KPbKog0qJqXI-2ztQ19o7w 提取码: 关注公众号[GitHubCN]回复 ...
 - 使用Vue.js制作仿Metronic高级表格(一)静态设计
		
Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables.本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库.jQuery做部分用户交互(弹窗). 使 ...
 - 【Vue.js】高仿饿了么外卖App(一)
		
1.架构从传统的MVC向REST API+前端MV*迁移 参考链接: http://blog.csdn.net/broadview2006/article/details/8615055 http:/ ...
 - 慕课网,vue高仿饿了吗ASP源码视频笔记
		
1.源码笔记 我的源码+笔记(很重要):http://pan.baidu.com/s/1geI4i2Z 感谢麦子学院项目相关视频 2.参考资料 Vue.js官网(https://vuejs.org.c ...
 
随机推荐
- (转)什么是P问题、NP问题和NPC问题
			
这或许是众多OIer最大的误区之一. 你会经常看到网上出现"这怎么做,这不是NP问题吗"."这个只有搜了,这已经被证明是NP问题了"之类的话.你要知道,大 ...
 - Windows 和 Mac 系统下安装git 并上传,修改项目
			
首先在MAC上怎么操作. 在gitHub创立一个账户,在创立一个项目,这就不用我说了对吧. 创建完之后是这样的: 接下来,我们打开https://brew.sh 这是下载homebrew的网站,hom ...
 - FrameBuffer系列 之 简单编程
			
一.Linux的帧缓冲设备 帧缓冲(framebuffer)是 Linux为显示设备提供的一个接口,把显存抽象后的一种设备,他允许上层应用程序在图形模式下直接对显示缓冲区进行读写操作.这种操作是抽象的 ...
 - Linux环境下用户空间与内核空间数据的交换方式
			
在linux环境开发过程中,经常会需要在用户空间和内核空间之间进行数据交换. 介绍了 Linux 系统下用户空间与内核空间数据交换的几种方式 第一节:使用procfs实现内核交互简明教程(1) 第二节 ...
 - mac地址学习笔记
			
MAC(Media Access Control或者Medium Access Control)地址, 意译为媒体访问控制,或称为物理地址.硬件地址,用来定义网络设备的位置. 在OSI模型中,第三层网 ...
 - <java>枚举的简单介绍
			
1.枚举,enum关键字,相当于public final static. 2.举例: 首先定义了一个名为spiciness的枚举类型. public enum Spiciness { NOT, MIL ...
 - 从点击到呈现 — 详解一次HTTP请求
			
一般来说,很多的参考资料上面都会说,http 是一个基于请求/响应的工作模式,然后画出一张浏览器和服务器的 b/s 结构图,再画上两个箭头,表示请求和响应,应该说这么解释是易懂的,一般也是够清楚的,但 ...
 - 用户交互式命令:read
			
read命令从键盘读取变量的值,通常用在shell脚本中与用户进行交互的场合.该命令可以一次读取多个变量的值,变量和输入的值都需要使用空格隔开. 语法 read [option]... [name . ...
 - 【挖洞经验】如何在一条UPDATE查询中实现SQL注入
			
直奔主题 跟往常一样,在喝完我最爱的果汁饮料之后,我会习惯性地登录我的Synack账号,然后选择一个应用来进行渗透测试,此时我的“黑客之夜”便正式开始了. 我与很多其他的安全研究人员的习惯一样,我会在 ...
 - VMTools安装
			
先启动CentOS并成功登陆如下图,发现底部提示,准备安装 2.选择虚拟机菜单栏--安装VMware tools 3.光驱目录中拷贝VMwareTools-10.0.5-3228253.tar.gz到 ...