Vue.js高仿饿了吗外卖APP核心知识

使用Vue.js作为项目的技术栈！这是目前最火的MVVM框架（之一），轻量、简洁、高效、数据驱动、组件化的优点，被大家称为“简单却不失优雅，小巧而不乏大匠”！

开发此项目需要的前置知识：
HTML CSS JavaScript 还需要es6(目前很重要)

认识一下MVVM框架

MVVM框架的提出：
1.针对具有复杂交互逻辑的前端应用
2.提供基础的架构抽象
3.通过Ajax数据持久化，保证前端用户体验
<好处多多……>

Vue.js包含两部分：数据驱动 + 组件化

数据响应原理：
数据（model）改变驱动视图（view）自动更新

组件设计原则

页面上每个独立的可视/可交互区域视为一个组件
每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护
页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面

项目技术架构

vue-cli（脚手架工具）
vue
vue-resource
vue-router（路由）
vue-infinite-scorll
stylus
webpack（打包工具）

介绍Vue-cli:
Vue-cli是Vue的脚手架工具。（即：帮助我们写好Vue.js基础代码的工具）

在此要先重点提一下webpack打包工具：
一些很好的前端框架(像angularjs,React,Vue)可以帮我们如何合理的组织代码，保持代码的可维护性和扩展性。这在开发阶段是很有用的，可是要把应用发布到线上的时候，需要把代码进行合并压缩，以减小代码体积，和文件数量，人为的对代码进行丑化。于是就有了grunt,gulp,webpack等前端工程化打包工具。

下面开始进入主题，主要讲项目：

第一章：项目实战-准备工作

一共需要这六张图上的功能（主页面区、细节区、评论区、商家详情页、购物车区、商家介绍）

图标字体的制作
icon- 开头的图标（如图所示）

如果我们需要的图没有那么我们就需要自己制作：
首先进入网页https://icomoon.io/
然后点击右上角的“IcoMoon APP”按钮 , 进入新页面我们就可以看到上图中给出的那些免费图标，

而这里我们选择导入自己的SVG图来生成ico-的图标，点击新页面左上角的“Inport ICONS”：

选择自己将要导入的SVG图标，上传。然后点击你上传的图片（黄色框），点击下面Generate Font就可以生成我们所需要的小图标了，这里的每一个图标都有各自的HTML和CSS代码标识，点击download下载即可

具体细节就看下载下来的文件中readme即可！
mock数据（模拟后台数据）
现在基本上都是前后端分离，前端是前端工程师，后端属于后端工程师，但是前后端交互是个必不可少的环节，一般用Ajax进行交互。还需要一些实验数据来支撑，就需要模拟数据。（此处所用数据是从别人网站上抓包来的数据）

这里真的把我坑的好惨啊
主要是现在使用的Vue是2.0以上的版本，然后视频是2016年的教学视频，版本是0.7.13。vue开发请求本地数据的配置，早期的vue-cli在bulid目录下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里面配置，最新的脚手架里面已经去掉了这两个文件，改用webpack.dev.conf.js代替。所以在webpack.dev.conf.js里面配置；
在const portfinder = require(‘portfinder’)下面加入：

const express = require('express')
const app = express()
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

另外，在devServer下面加入

before(app) {
app.get('/api/seller', (req, res) => {
res.json({
errno: 0,
data: seller
})
}),
app.get('/api/goods', (req, res) => {
res.json({
errno: 0,
data: goods
})
}),
app.get('/api/ratings', (req, res) => {
res.json({
errno: 0,
data: ratings
})
})
},

其他的一些配置问题，就自己百度，主要是插件版本问题，造成了很多困扰。一定要耐心、耐心、耐心……

第二章：项目实战-页面骨架开发

1.插件拆分问题
这里使用CSS3中的Flex布局来实现“商品”、“评价”、“商家”三列布局，Flex（弹性布局盒模型）方便，快捷，效果好。
最终生成的页面效果如图：

2、vue-router
这里我们需要学会使用vue-router开发单页应用。
还是那个问题：由于版本问题，各种设置可能会搞到你崩溃，不要着急找‘度娘’，肯定能解决，各方面的设置，从style的设置，ESLint+es6出现的各种标准问题，后续的class active 激活状态，以及选择器等等……

3、1像素border的实现
这里我只是用最基础的css设置实现了：

border-bottom:  1px solid rgba(7,17,27,0.1);

但是看上去不太像1像素，视频中用伪类实现的方法，并实现兼容性缩放，我没有实现。

第三章：实战项目 - header组件开发

第四章：实战项目 - goods商品列表页开发

第五章：实战项目 - food商品详情页实现

第六章：实战项目 - ratings评价列表页实现

第七章：实战项目 - seller商家详情页实现

后续边学习边更新……

项目：Vue.js高仿饿了吗外卖APP（一）相关推荐

Vue.js高仿饿了么外卖App学习记录
(给达达前端加星标,提升前端技能) 开发一款vue.js开发一款app,使用vue.js是一款高效的mvvm框架,它轻量,高效,组件化,数据驱动等功能便于开发.使用vue.js开发移动端app,学会使 ...
Vue.js 高仿饿了么外卖APP
第1章课程简介介绍课程的学习目标和学习内容. 1-1 课程简介 1-2 课程安排第2章 Vuejs介绍从前端开发趋势分析开始,引入 MVVM 开发框架和 Vue.js,接着对比流行框架Angu ...
项目：Vue.js高仿饿了吗外卖APP（二）
[vue]饿了吗项目 – goods商品列表开发 (PS:结合自己这几天看的,以及前人给出的经验,借鉴他人的博客,总结出下面的内容) 1.flex 属性是 flex-grow.flex-shrink ...
【慕课网实战课程笔记】Vue.js高仿饿了么外卖App
写在前面:该课程为慕课网付费课程,笔记内容代码居多.内容简略,仅供自己日后翻阅.如有疑问或者不妥,欢迎提出指正,我看到了会回复,谢谢! 第1章:课程简介第2章:Vuejs介绍 Ctrl+Alt+l ...
vue结合饿了么_Vue.js 高仿饿了么外卖app 全套_IT教程网
资源名称:Vue.js 高仿饿了么外卖app 全套资源目录: vue仿饿了么视频全套全套资源 │ files.txt │ project.zip │ resource.zip │ ├─第01 ...
vue.js高仿饿了吗实现tips
@[TOC]vue.js高仿饿了吗实现tips 高仿饿了吗–tip1 动态评星目标:根据商家的星级生成指定的五行样式注意点无论星级多少,星星的个数都是五颗,所以利用v-for循环生成利用内联标 ...
vue + vue-router + vue-resource + es6 + stylus + webpack 高仿饿了么外卖App商家详情
VUE高仿饿了么app 本项目github地址:https://github.com/motysla/eleme.git VUE 搭建简介刚学习了VUE高仿饿了么app课,记录课的要点,巩固知识. ...
【笔记-vue】《imooc-vue.js高仿饿了么》、《imooc-vue 音乐app》、《imooc-vue.js源码全方位解析》
20170709 - 20171128:<imooc-vue.js高仿饿了么> 一.第一章课程简介 1-1课程简介 1.需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译 ...
基于SpringBoot的仿饿了吗外卖APP设计与实现
一.需求本App主要实现了用户的登录,商品的浏览,购物车查询等功能,如下表所示二.主体框架 2.1 整体框架 2.2 数据的流向数据类型数据流向交易商品信息数据库->客户商品类别信 ...

项目：Vue.js高仿饿了吗外卖APP（一）