项目总结：vue.js2.5饿了么APP（1）概述+项目准备

说明：本总结来源于慕课网 @ustbhuangyi老师的课程《Vue.js2.5+cube-ui重构饿了么App》课程，本博客做了项目总结梳理便于回顾，需要学习的伙伴可以移步学习。与君共勉！

项目总结：vue.js2.5饿了么APP（1）概述+项目准备 

项目总结：vue.js2.5饿了么APP（2）主要组件实现 - 头部相关组件

项目总结：vue.js2.5饿了么APP（3）主要组件实现 - 购物车相关组件（上）

项目总结：vue.js2.5饿了么APP（4）主要组件实现 - 购物车相关组件（下）

项目总结：vue.js2.5饿了么APP（5）主要组件实现 - 商品详情页部分

项目总结：vue.js2.5饿了么APP（6）主要组件实现 - 评价页+商家页部分

项目总结：vue.js2.5饿了么APP（7）项目部署与总结

项目github链接： https://github.com/Rachel-X-4869/cube-ui-eleme-project

---

目录

一、概述

1. 项目简介

2. 功能技术分析

3. 学习内容

4. 近年来前端开发趋势

5. MVVM框架

6. 什么是vue.js

7. cube-ui组件库

二、项目准备

1. 需求分析

1）区块划分

2）组件拆分

2. 图片素材

1）设备像素比

2）SVG图片

3）support-ico组件对图标处理

3. mock数据

4. 使用vue-cli搭建项目框架

5. 安装cube-ui

6. 项目common目录

1）fonts

2）stylus

7. axios封装和数据获取

8. 1像素border实现

---

一、概述

1. 项目简介

使用vue.js vue是当前最火的MVVM框架，（优点：轻量、简洁、高效、数据驱动、组件化）

本项目做的是：高仿上线外卖APP商家模块

开发过程：需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译打包

以线上生产环境来开发：代码开发及测试环节：UI标注完美还原设计图、以真实外卖APP数据做演示，以保证代码无兼容性问题。

代码规范：（1）架构设计；（2）组件抽象；（3）模块拆分；（4）代码风格统一；（5）JS变量命名规范；（6）CSS代码规范；致力于编写高可维护，易于扩展，通用性强的代码，了解真实项目流程。

2. 功能技术分析

一期

（1）Vue-resource和后端做数据交互，

（2）使用Vue-router做前端路由实现单页面应用，

（3）使用第三方库better-scroll来实现列表滚动，

（4）最大程度组件化（页面上有很多样式和功能相似的区块，方便在项目中复用），

（5）商家页面中，收藏商家这个功能会使用html5的localstorage接口，存储在浏览器端，

（6）对于图标字体的应用，

（7）移动端1像素边框，

（8）css sticky footer布局，

（9）flex弹性布局。

二期

技术栈：vue.js 2.5.17   vue-cli 3.0 cube-ui

（1）Vue.js高级知识（组件封装，组件通信，插槽，过渡动画，mixin）

（2）对于vue-cli3.0脚手架的应用（不仅用来初始化项目和开发调试，还做一些额外的webpack配置，并且利用它来mock数据，在项目完成之后还会做打包构件分析）；

（3）充分利用cube-ui的七个组件和一个模块（使用第三方开源组件库）

3. 学习内容

学习目标：（1）掌握vue.js在实战中的运用；（2）学会使用Vue.js完整开发移动端APP；（3）学会组件化、模块化的开发方式；（4）学会使用第三方组件库辅助开发；（5）学会项目部署和构建过程

学习内容：（1）Vue.js框架介绍；（2）vue-cli脚手架搭建基本代码框架；（3）vue-router官方插件管理路由；（4）vue-source ajax通信；webpack构建工具；（6）ES6+eslint 规范代码风格，代码风格审查工具，静态语法检查。

移动端常用开发技巧：（1）flex弹性布局；（2）css stickyfooter布局；（3）炫酷的交互设计；

4. 近年来前端开发趋势

（1）旧浏览器逐渐被淘汰，移动端需求增加（IE6-8不支持ES5特性）

（2）前端交互越来越多，功能越来越复杂（高大上的技术库和框架，酷炫的运营活动页面，H5小游戏，新闻趣味站，在线购物平台，社交网络，金融信贷应用，