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

末蓝、 2022-05-20 08:38 351阅读 0赞

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

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

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

认识一下**MVVM框架**  
![这里写图片描述][70 1]  
MVVM框架的提出：  
1.针对具有复杂交互逻辑的前端应用  
2.提供基础的架构抽象  
3.通过Ajax数据持久化，保证前端用户体验  
<好处多多……>

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

![这里写图片描述][70 2]  
数据响应原理：  
数据（model）改变驱动视图（view）自动更新  
![这里写图片描述][70 3]

## 组件设计原则 ##

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

## 项目技术架构 ##

*  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等前端工程化打包工具。  
![这里写图片描述][70 4]

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

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

![这里写图片描述][70 5]  
一共需要这六张图上的功能（主页面区、细节区、评论区、商家详情页、购物车区、商家介绍）

--------------------

**图标字体的制作**  
icon- 开头的图标（如图所示）  
![这里写图片描述][70 6]  
如果我们需要的图没有那么我们就需要自己制作：  
首先进入网页[https://icomoon.io/][https_icomoon.io]  
然后点击右上角的“`IcoMoon APP`”按钮 , 进入新页面我们就可以看到上图中给出的那些免费图标，  
![IconMoonAPP 按钮][IconMoonAPP]  
而这里我们选择导入自己的SVG图来生成ico-的图标，点击新页面左上角的`“Inport ICONS”`：  
![这里写图片描述][70 7]  
选择自己将要导入的SVG图标，上传。然后点击你上传的图片（黄色框），点击下面`Generate Font`就可以生成我们所需要的小图标了，这里的每一个图标都有各自的HTML和CSS代码标识，点击`download`下载即可  
![这里写图片描述][70 8]  
![生成图标][70 9]  
具体细节就看下载下来的文件中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（弹性布局盒模型）方便，快捷，效果好。  
最终生成的页面效果如图：  
![这里写图片描述][70 10]

**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商家详情页实现 ##

后续边学习边更新……

[70]: /images/20220520/11ec8b8442014f1fb7caed8d527d1b5e.png
[70 1]: /images/20220520/68c825f2b6b949fd8887b820c569313b.png
[70 2]: /images/20220520/50879b7509ac4f9180d6479e6f1e726b.png
[70 3]: /images/20220520/62e6f4a58a614560b1ed13fa301f3849.png
[70 4]: /images/20220520/2bd13d1626cd417d9139091668feaae9.png
[70 5]: /images/20220520/11a56f68c8a7420285c2b4bce6b33339.png
[70 6]: /images/20220520/20dfb7ff4b064a4993f6567bc1f6e4b2.png
[https_icomoon.io]: https://icomoon.io/%20%E2%80%9C%E5%88%B6%E4%BD%9C%E5%9B%BE%E6%A0%87%E7%BD%91%E5%9D%80%E2%80%9D
[IconMoonAPP]: /images/20220520/91fd37b403834fd49b60fca9ffa2f0f8.png
[70 7]: /images/20220520/269d0c2daf8648cdbe27802538efbb0e.png
[70 8]: /images/20220520/502fdd0a11934a6ba058363873883ef4.png
[70 9]: /images/20220520/6eb424fc34874f7dbade2c6f26044107.png
[70 10]: /images/20220520/2f297c3dfacc4cd0a9f8daf1aed928a4.png