介绍

学习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. dubbo个人总结

    dubbo,分布式服务框架,RPC服务框架. 注册中心zk,redis......,使用大多为zk 注册流程 最后一图 服务提供者启动时向/dubbo/com.foo.BarService/provi ...

  2. PHP 魔术方法 __call 与 __callStatic 方法

    PHP 魔术方法 __call 与 __callStatic 方法 PHP 5.3 后新增了 __call 与 __callStatic 魔法方法. __call 当要调用的方法不存在或权限不足时,会 ...

  3. 使用Spring标签<form:textarea>时，用readonly=“readonly”属性时不起作用。

    最近的一个项目用到了Spring标签<form:textarea>,当在设置其只读属性时,使用readonly="readonly"不起作用,还是能修改内容. 在网上找 ...

  4. 光场相机重聚焦之二——Lytro Illum记录光场

    上一节中大概讲述了光场相机和光场的参数化表示,这一节就说一下光场相机内部是如何记录光场以及实现重聚焦的. 博主用的是Lytro Illum,所以就以Illum为例来说了,Illum的功能还是挺多的,上 ...

  5. redis 字典

    redis 字典 前言 借鉴了 黄健宏 的 <<Redis 设计与实现>> 一书, 对 redis 源码进行学习 欢迎大家给予意见, 互相沟通学习 概述 字典是一种用于存储键值 ...

  6. css 画出三角形

    技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...

  7. xml语法规则

    所有 XML 元素都须有关闭标签 在 HTML,经常会看到没有关闭标签的元素: <p>This is a paragraph <p>This is another paragr ...

  8. .net应用程序中添加chm帮助文档打开显示此程序无法显示网页问题

    在做.net大作业时添加了chm帮助文档结果在打开时显示“此程序无法显示网页问题”,但是把帮助文档拷到别的路径下却显示正常, 经过从网上查找,终于找到了答案: (1).chm文件的路径中不能含有“#” ...

  9. 【日常】C++ 的那些“坑” —— delete 与 析构函数 与 virtual 的 9 个小例子

    C++中有无数的坑,但毕竟-- 今天就踩到了,也算是基本问题了,记录一下,顺便以后可以考考自己.你也可以猜猜答案,大牛绕行. 0x1 先看这个: #include <stdio.h> #i ...

  10. JS基础——入门必备

    ·首先,来简单的说一下,JS是啥,JS是JavaScript的简写,是 基于浏览器的 基于对象的 事件驱动 脚本语言 ·那么JS有什么用呢?ta可以实现: 表单验证 添加动画效果 动态更改页面内容 A ...