介绍

学习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. 设置ZooKeeper服务器地址列表源码解析及扩展

    设置ZooKeeper服务器地址列表源码解析及扩展 ZooKeeper zooKeeper = new ZooKeeper("192.168.109.130:2181",SESSI ...

  2. Angular.js学习笔记 (二)

    用A链接对象解析url的组成 var url = 'https://www.baidu.com:8080/aaa/1.html?id=10#name'; var aLink = document.cr ...

  3. ios 视频拼接/合成

    上面的图说明的是这个混合的过程,下面放代码: - (void)mergeAndExportVideos:(NSArray*)videosPathArray withOutPath:(NSString* ...

  4. 20+个很棒的Android开源项目

    20+个很棒的Android开源项目 本文摘自文章: 20+ Awesome Open-Source Android Apps To Boost Your Development Skills. 考虑 ...

  5. Webdriver API之操作(二)

    一.窗口截图 dirver.get_screenshot_as_file("D:\\report\\image\\xxx.jpg") 二.关闭窗口 dirver.close() # ...

  6. 简单的总结一下iOS面试中会遇到的问题

    1.线程是什么?进程是什么?二者有什么区别和联系?  一个程序至少有一个进程,一个进程至少有一个线程: 进程:一个程序的一次运行,在执行过程中拥有独立的内存单元,而多个线程共享一块内存 线程:线程是指 ...

  7. 关于socket编程获取客户端地址笔记

    因为最近刚好碰到这块,而且很不小心的在上面踩了个坑,所以把这个坑记录下来 首先,在我们都是在accept函数以后来获取客户端的地址: client_sd = accept(watcher->fd ...

  8. Hadoop之HDFS原理及文件上传下载源码分析(下)

    上篇Hadoop之HDFS原理及文件上传下载源码分析(上)楼主主要介绍了hdfs原理及FileSystem的初始化源码解析, Client如何与NameNode建立RPC通信.本篇将继续介绍hdfs文 ...

  9. Linux基础测试--11道题

    000.创建一个目录/data mkdir /data 001.在/data 下面创建一个文件oldboy.txt touch /data/oldboy.txt 002.为oldboy.txt 增加内 ...

  10. Redis 基本安全规范文档

    温馨提示:我在一家手游的公司工作,因为经常用到redis,特为此整理文档(借鉴过大神的文章): 一.什么是redis(出自百度百科)? redis是一个key-value存储系统.和Memcached ...