介绍

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

部分截图

项目预览

技术栈

虽然项目较小,但常用的技术工具均有使用,本项目对于vue初学者来说,难度适宜,可以从中学到各种工具的运用,若能独立完成此项目,对自动化构建vue项目将有很大帮助。正在学习Vue的同学,不妨亲手试试吧。本项目使用到的技术栈有:

说明

线上预览版本数据为mock数据,未使用axios从服务器端获取,若想了解axios在本项目中的使用,可fork本项目并clone到本地查看。

上文中已贴出源码地址,供有兴趣的同学查看,欢迎star或fork。

Vue.js高仿饿了么WebApp的更多相关文章

  1. vue.js高仿饿了么(前期整理)

    1.熟悉项目开发流程 需求分析——>脚手架工具——>数据mock——>架构设计——>代码编写——>自测——>编译打包. 2.熟悉代码规范 从架构设计.组件抽象.模块 ...

  2. 【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(三)

    前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_el ...

  3. 基于vue2+nuxt构建的高仿饿了么(2018版)

    前言 高仿饿了么,以nuxt作为vue的服务端渲染,适合刚接触或者准备上vue ssr的同学参考和学习 项目地址如遇网络不佳,请移步国内镜像加速节点 效果演示 查看demo请戳这里(请用chrome手 ...

  4. Vue2.0仿饿了么webapp单页面应用

    Vue2.0仿饿了么webapp单页面应用 声明: 代码源于 黄轶老师在慕课网上的教学视频,我自己用vue2.0重写了该项目,喜欢的同学可以去支持老师的课程:http://coding.imooc.c ...

  5. 用vue2 +vue-router2 + es6 +webpack 高仿饿了么app(干货满满)

    #高仿饿了么app商家详情 (vue2 +vue-router2 + es6 +webpack )   ##demo [demo 地址](http://liangxiaojuan.github.io/ ...

  6. Vuejs 高仿饿了么外卖APP 百度云视频教程下载

    Vuejs 高仿饿了么外卖APP 百度云视频教程下载 链接:https://pan.baidu.com/s/1KPbKog0qJqXI-2ztQ19o7w 提取码: 关注公众号[GitHubCN]回复 ...

  7. 使用Vue.js制作仿Metronic高级表格(一)静态设计

    Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables.本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库.jQuery做部分用户交互(弹窗). 使 ...

  8. 【Vue.js】高仿饿了么外卖App(一)

    1.架构从传统的MVC向REST API+前端MV*迁移 参考链接: http://blog.csdn.net/broadview2006/article/details/8615055 http:/ ...

  9. 慕课网,vue高仿饿了吗ASP源码视频笔记

    1.源码笔记 我的源码+笔记(很重要):http://pan.baidu.com/s/1geI4i2Z 感谢麦子学院项目相关视频 2.参考资料 Vue.js官网(https://vuejs.org.c ...

随机推荐

  1. 删除 vim 命令

    x 删除当前光标下的字符dw 删除光标之后的单词剩余部分.d$ 删除光标之后的该行剩余部分.dd 删除当前行. c 功能和d相同,区别在于完成删除操作后进入INSERT MODEcc 也是删除当前行, ...

  2. 关于php 高并发解决的一点思路

    涉及抢购.秒杀.抽奖.抢票等活动时,为了避免超卖,那么库存数量是有限的,但是如果同时下单人数超过了库存数量,就会导致商品超卖问题.那么我们怎么来解决这个问题呢,我的思路如下(伪代码): sql1:查询 ...

  3. 日志框架SLF4J

    1.什么是SLF4J SLF4J:Simple Logging Facade for Java,为java提供的简单日志Facade.Facade门面,更底层一点说就是接口.它允许用户以自己的喜好,在 ...

  4. NodeJS+express+mogondb学习笔记01

    0.准备工作  安装nodejs环境  官网地址:https://nodejs.org/en/  下载好了 直接一路安装 也没有什么可以说的 不得不说nodejs对于新手上手还是很友好的,再加上现在n ...

  5. ArrayList 遍历

    1.迭代器遍历 package sourceCode.ArrayList; import java.util.ArrayList; import java.util.Iterator; import ...

  6. SQLiteServer+SQLiteClient 用于.Net项目的SQLite服务端程序和客户端类库

    SQLite没有官方的支持CS方式调用的方式,因项目需要我自行开发了一个简易的版本. 当前版本支持的方法 SQLiteOpen(fileName):bool SQLiteClose():void SQ ...

  7. Apache Spark1.1.0部署与开发环境搭建

    Spark是Apache公司推出的一种基于Hadoop Distributed File System(HDFS)的并行计算架构.与MapReduce不同,Spark并不局限于编写map和reduce ...

  8. Laravel 5.2 教程 - 迁移

    一.简介 迁移(Migrations)是一种数据库的版本控制.可以让团队在修改数据库结构的同时,保持彼此的进度一致.迁移通常会和 结构生成器 一起使用,可以简单的管理数据库结构. 下面以创建学生表的迁 ...

  9. JS的Dom树小结

    一[DOM树节点]  DOM节点分为三大类:元素节点.文本节点.属性节点 文本节点.属性节点,为元素节点的两个子节点:  通过getElement系列方法,可以去到元素节点.     二[查看节点] ...

  10. 关于获取URL中传值的解决方法

    在我们页面的URL中包含着很多信息,包括域名,协议等等这里就不一一介绍了),对于我们开发者而言,使用比较多的就是页面之间的传值.为什么要页面传值呢?很简单,当你在浏览一个商品页面的时候你要看到一个商品 ...