【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑（一）

【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑（一）

前言：学习Vue.js高仿饿了么课程过程中，总结了这个Web App项目从准备到开发完毕自己觉得很重要的知识点。这一篇主要介绍：项目准备、页面骨架开发、header组件开发。

项目github地址：https://github.com/66Web/ljq_eleme，欢迎Star。

---

 

App	header

 

一、项目分析&学习目标

       当前最火的MVVM框架

• Vue.js —— 轻量、简洁、高效、数据驱动、组件化

      高仿上线外卖App标准来开发

• 核心模块 —— 商家模块

      开发一个webApp的全流程

1. 需求分析
2. 脚手架工具
3. 数据mock
4. 架构设计
5. 代码编写
6. 自测
7. 编译打包

      以线上生产环境的代码质量作标准

• 代码开发及测试环节：

1. UI标注
2. 真实数据演示

• 代码规范

1. 架构设计
2. 组件抽象
3. 模块拆分
4. 代码风格统一
5. JS变量命名规范
6. CSS代码规范

      功能技术分析

• vue-resource:  和后端做数据交互
• vue-router:  做前端路由，实现单页应用
• 第三方JS库better-scroll:  列表滚动的实现
• 最大程度组件化： 提高代码的复用
• html5的localstorage：【收藏商家】功能—存储在浏览器端
• 细节：图标字体的使用
• 移动端1像素边框
• css sticky footer布局
• flex 弹性布局

      学习目标

• 掌握Vue.js在实战中的运用
• 学会使用Vue.js【完整的】开发移动端App
• 学会组件化、模块化的开发

      学习内容

• Vue.js框架介绍
• Vue-cli 脚手架 —— 搭建基本代码框架
• vue-router 官方插件 —— 管理路由
• vue-resource 官方插件 —— 和后端作Ajax通信
• Webpack 开源构建工具（把源代码经过编译生成浏览器可以识别和运行的代码）
• es6 + eslint eslint —— es6代码风格检查工具
• 工程化 组件化 模块化
• 移动端常用开发技巧：

1. flex弹性布局
2. css stickyfooter
3. 酷炫的交互设计

二、Vue.js介绍

      近年来前端开发趋势

• 旧浏览器逐渐淘汰，移动端需求增加
• 前端交互越来越多，功能越来越复杂
• 架构从传统后台MVC 向REST API+ 前端MV* 迁移

      （前者传统MVC：更新数据会刷新页面 后者前端MV*： 向后端REST API异步请求数据，局部刷新页面）

        MV* —— MVC、MVP、MVVM

      MVVM框架

      View    ViewModel    Model

       视图        通讯           数据

• DOM 观察者 Javascript对象

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

• MVVM框架技术：vue.js、react.js、Angular.js

      对比Anglar  React

• Vue.js更轻量，gzip后大小只有 20K+
• Vuejs更易上手，学习曲线平稳
• 吸收两家之长，借鉴了angular的指令和react的组件化

      vue.js 核心思想

• 数据驱动
• 组件化

      组件设计原则

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

三、Vue-cli开启Vue项目

      Vue-cli 是Vue的脚手架工具 —— 帮助写好Vue基础代码的工具

1. 目录结构
2. 本地调试
3. 代码部署
4. 热加载
5. 单元测试

      安装使用

(sudo) npm install -g vue-cli  // sudo:mac环境下有关管理权限的命令

vue init webpack my-project

      项目文件

• src文件夹：存放项目源码
• bulld目录+ config目录：webpack配置相关
• node_modules文件夹：npm install 安装的依赖代码库

1. static—>.gitkeep: 当这个目录为空时也可以将它提交到git仓库中
2. babelrc : babel的一些配置，es6语法的转换
3. .editorconfig: 编辑器的配置
4. .eslintignore: 忽略语法检查的目录文件，一般忽略build目录和node_modules目录
5. .eslintrc.js: eslint的配置文件
6. gitignore: 上传git仓库要忽略的一些文件的配置
7. index.html: 入口html文件，要使用的css和js文件会在编译过程中自动插入
8. package.json：整个项目的配置文件，一般用来描述项目 ↓

        →  scripts:  配置一些需要执行的命令
        →  dependencies：开发环境中的依赖
        →  devdependencies： 编译过程中的依赖

      项目运行

npm run dev　

• src开发目录下：

1. main.js —— 项目入口文件
2. App.vue —— 主页面组件

• vue语法糖:  export default { } 一个对象——可以定义一个组件

【小知识点】sublime自动格式化 —— Command+option+L 或 Control+alt+L

 

• 在父组件中使用子组件，如Hello.vue:

1. 引用 

   import Hello from './compoments/Hello'