【Vue.js】高仿饿了么外卖App(一)
1.架构从传统的MVC向REST API+前端MV*迁移
参考链接:
http://blog.csdn.net/broadview2006/article/details/8615055
http://blog.csdn.net/u013628152/article/details/42709033
MV*包括:MVC、MVP、MVVM
vue.js是MVVM框架

2.Iconmoon制作图标字体
2.1 点击IconMoon App

2.2点击import icons,导入svg图片

2.3选择你导入的图标,并点击右下角generate font

2.4点击get code

2.5点击preference命名font name

2.6导出后得到如下文件,拷贝fonts文件和style.css

3.data.json中存放数据(模拟数据库),模拟的数据请求就从该源中读取数据。
3.1打开build目录,找到dev-server.js(webpack打包的入口文件),从data.json中读取数据(图中红色部分)

3.2编写路由(图中粉红色部分)
3.3通过接口查看数据

4.reset.css的引入,其中自定义了一部分,去掉icon.styl中的{}和;

5.移动端的视口的相关设置

6.在main.js中添加分号;
编译报错,可以访问提示的链接

在eslintrc.js中修改关于分号的配置

将App.vue中的各个标签清空(等待重新编写),删掉hello.vue文件
【Vue.js】高仿饿了么外卖App(一)的更多相关文章
- Vuejs 高仿饿了么外卖APP 百度云视频教程下载
Vuejs 高仿饿了么外卖APP 百度云视频教程下载 链接:https://pan.baidu.com/s/1KPbKog0qJqXI-2ztQ19o7w 提取码: 关注公众号[GitHubCN]回复 ...
- Vue.js高仿饿了么WebApp
介绍 学习Vue.js也有一阵子了,为了加深对Vue的理解及运用,做了一个小项目.这是一个高仿饿了么外卖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 +vue-router2 + es6 +webpack 高仿饿了么app(干货满满)
#高仿饿了么app商家详情 (vue2 +vue-router2 + es6 +webpack ) ##demo [demo 地址](http://liangxiaojuan.github.io/ ...
- 使用Vue.js制作仿Metronic高级表格(一)静态设计
Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables.本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库.jQuery做部分用户交互(弹窗). 使 ...
- 慕课网,vue高仿饿了吗ASP源码视频笔记
1.源码笔记 我的源码+笔记(很重要):http://pan.baidu.com/s/1geI4i2Z 感谢麦子学院项目相关视频 2.参考资料 Vue.js官网(https://vuejs.org.c ...
- VUE高仿饿了么app开发思维导图
来自互联网 文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing
随机推荐
- 标准Trie字典树学习二:Java实现方式之一
特别声明: 博文主要是学习过程中的知识整理,以便之后的查阅回顾.部分内容来源于网络(如有摘录未标注请指出).内容如有差错,也欢迎指正! 系列文章: 1. 标准Trie字典树学习一:原理解析 2.标准T ...
- ASP.Net之一般处理程序
1.静态语言和动态语言 静态语言:在服务器端,不会被执行,直接作为 字符串 发回给浏览器,由浏览器运行的语言( HTML+CSS+JS). 动态语言:在服务端,会被服务器端的某种语言的虚拟机执行的 ...
- springMVC 静态资源加版本号
springMVC 静态资源加版本号 http://blog.csdn.net/zhangt85/article/details/42126275
- HBase—列族数据库的术语
1. 列族数据库的基本组件 键空间,行键,列,列族 2. 什么是键空间 keyspace? 键空间 keyspace 是列族数据库的顶级数据结构,它在逻辑上能够容纳列族,行键以及与之相关的其他数据结构 ...
- K:双栈法求算术表达式的值
相关介绍: 该算法用于求得一个字符串形式的表达式的结果.例如,计算1+1+(3-1)*3-(21-20)/2所得的表达式的值,该算法利用了两个栈来计算表达式的值,为此,称为双栈法,其实现简单且易于理 ...
- ASP.NET MVC与ASP.NET WebForm
ASP.NET MVC是微软公司的一款WEB开发框架,整合了“模型-视图-控制器”架构的高效与整洁,是敏捷开发最现代的思想与技术.它是传统ASP.NET WebForm的一个完善的替代品. 1.当今的 ...
- lambda 表达式学习笔记
在Java中传递一个代码段并不容易,不能直接传递代码段.Java是一个面向对象语言,所以必须构造一个对象,这个对象的类需要一个方法能包含所需的代码.lambda的出现有效的解决这个问题,让代码变得更加 ...
- 移动前端调试页面–weinre
安装 npm install -g weinre 启动 weinre --boundHost -all- 浏览器查看 http://localhost:8080 插入相关文件 index.html d ...
- linux shell实现守护进程 看门狗 脚本
嵌入式初学者,第一次上传代码.昨天做了一个udhcpd与udhcpc的守护,目前只会用shell模仿编写,还有什么方法可以做守护呢? ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...
- 三、angularjs上传图片
上传图片需要引入插件ngFileUpload,使用bower安装方法: bower install ng-file-upload --save,安装后需要在命名app的名字js文件中注入,如下所示: ...