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

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

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

认识一下MVVM框架

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

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

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

组件设计原则

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

项目技术架构

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

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

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

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

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

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

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

若是咱们须要的图没有那么咱们就须要本身制做：
首先进入网页https://icomoon.io/
而后点击右上角的“IcoMoon APP”按钮 , 进入新页面咱们就能够看到上图中给出的那些免费图标，

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

选择本身将要导入的SVG图标，上传。而后点击你上传的图片（黄色框），点击下面Generate Font就能够生成咱们所须要的小图标了，这里的每个图标都有各自的HTML和CSS代码标识，点击download下载便可


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

这里真的把我坑的好惨啊
主要是如今使用的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（弹性布局盒模型）方便，快捷，效果好。
最终生成的页面效果如图：

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

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

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

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

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

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

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

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

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

后续边学习边更新……