项目总结:vue.js2.5饿了么APP(1)概述+项目准备

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

目录

一、概述

1. 项目简介

2. 功能技术分析

3. 学习内容

4. 近年来前端开发趋势

5. MVVM框架

6. 什么是vue.js

二、项目准备

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. 功能技术分析

项目总结:vue.js2.5饿了么APP(1)概述+项目准备插图

一期

(1)Vue-resource和后端做数据交互,

(2)使用Vue-router做前端路由实现单页面应用,

(3)使用第三方库better-scroll来实现列表滚动,

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

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

(6)对于图标字体的应用,

(7)移动端1像素边框,

(8)css sticky footer布局,

(9)flex弹性布局。

项目总结:vue.js2.5饿了么APP(1)概述+项目准备插图(1)

二期

技术栈: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小游戏,新闻趣味站,在线购物平台,社交网络,金融信贷应用,音乐互动社区,视频分享平台,打车出行平台)

(3)架构从传统的后台MVC向REST API + 前端MV*(MVC MVP MVVM)迁移(使用ajax方式,和后端REST API通讯,异步刷新页面的某个区块,来优化和提升体验)

5. MVVM框架

      Model 是数据部分,对应到前端就是JavaScript对象;View是视图部分,对应前端的DOM,ViewModel就是连接视图和数据的中间件。

      在MVVM的架构下,数据和视图是不能够直接通讯的,通常通过viewmodel做通信,viewmodel通常要实现一个observer观察者,当数据发生变化,viewmodel能够观察到数据的变化,然后通知到对应的视图做更新,而当用户操作视图,viewmodel也能监听到视图变化,然后通知数据做改动,这就实现了数据的双向绑定。

项目总结:vue.js2.5饿了么APP(1)概述+项目准备插图(2)

应用场景:针对具有复杂交互逻辑的前端应用;提供基础的架构对象;通过Ajax数据持久化,保证前端用户体验。

(当前端和数据进行操作的时候,可以通过ajax请求和后端做数据持久化,不需要刷新整个页面,只需要改动DOM里面需要改动的部分,特别是移动端应用场景,刷新页面的代价太昂贵,会重新很多资源,虽然有些资源会被缓存,,但是页面的DOM,JS,CSS都会被重新解析一遍,因此移动端页面都会做成SPA单页面应用,因此诞生了很多SVVM框架,如angular.js, react.js, vue.js)

6. 什么是vue.js

(1)它是一个轻量级MVVM框架;

(2)数据驱动+组件化的前端开发

(3)GitHub超过25k star,社区完善

对比Angular 和React

vue.js更加轻量,gzip后大小之后20K+,因此对于移动端来说vue更加适合;

vue.js容易上手,学习曲线平稳;(angular入手较难)

吸收两家之长,借鉴angular的指令和react的组件化;

Vue.js的核心思想

项目总结:vue.js2.5饿了么APP(1)概述+项目准备插图(3)

(1)数据驱动:DOM是数据的一种自然映射

    如果没有Viewmodel是如何交互的?视图改变会手动触发DOM改变。

    使用了Vue.js之后,就省去了手动操作DOM的步骤,在vue.js中只用改变数据,vue.js通过Directive指令,对DOM进行封装,当数据发生变化,会通知指令修改对应的DOM,数据驱动DOM变化,DOM是数据的一种自然映射。Vue.js还会对操作做一些监听,当我们修改视图的时候,vue.js监听到这些变换,从而改变数据,这样就形成了数据的双向绑定。

    数据响应原理:数据改变驱动视图更新。

    有一份数据a.b,在一个vue对象实例化的过程中,会给b通过object。Defineproperty属性添加了getter和setter,同时vue.js会对模板进行编译,解析生成一个指令对象v-text指令,每个指令对象都会关联一个watcher,当我们对对应的表达式a.b求值的时候,就会触发getter,把依赖收集到watcher里面。当再次改变a.b的值的时候,会触发setter,会通知到对应的watcher,watcher会再次对a.b求值,计算对比新旧值,当发现值改变,watcher会通知到指令,使用指令的update方法,由于指令是对DOM的封装,所以就会调用原生DOM的方法更新视图,这样就完成了数据改变到数据更新的一个自动化的过程。

项目总结:vue.js2.5饿了么APP(1)概述+项目准备插图(4)

(2)组件的设计原则:页面上每个独立的可视/可交互区域视为一个组件;每个组件对应一个工程目录,组件需要的各种资源在这个目录下就近维护(前端工程化和分治思想);页面不过是组件容器,组件可以嵌套自由组合形成完整页面。

二、项目准备

1. 需求分析

1)区块划分

6张设计稿;区块划分为:头部区、内容区(商品页、评论页、商家详情页)

项目总结:vue.js2.5饿了么APP(1)概述+项目准备插图(5)项目总结:vue.js2.5饿了么APP(1)概述+项目准备插图(6)

点击导航栏会进行切换,由于是SPA单页面应用--切换页面时不会刷新整个页面;

(1)头部区:包括商家描述,当点击公告和数字的时候会展示黑色的浮层,点击按钮浮层关闭;

(2)内容区

    商品页:可以拆分为左右两栏,左侧是商品的分类,右侧是实际商品的列表。当商品区块对应某个分类时,左边导航栏相应分类会高亮,当列表内容超过页面可视区块时,可以进行滚动,在滚动右侧时,左侧的高亮区也会保持联动的效果。商品页底部是一个购物车,当点击加号购买商品的时候,购物车会联动购买的商品总数和金额,当金额超过最小配送费时,显示“去结算”按钮,点击按钮可以进行结算;当购物车商品部位0 时,点击购物车是没有反应的;点击购物车会弹出购物车列表,列表也有最大高度,当超过最大高度,内部可以滚动,在购物车内部也可以进行添加和删除操作,并且和主页面保持联动。当我们点击具体的商品,会展示具体商品页浮层,有商品图片、介绍,可以点击加入购物车,一样可以完成一次购买流程,底部是一个评论区,我们可以条件查看,比如根基评级类型(有无内容)进行勾选,评论区的显示会相应做出变化,当浮层页面超过手机高度时,页面可以滚动,页面左上角有一个返回按钮,点击按钮浮层会关闭。

    商品评论页:上面是一个评星级别,下面是具体的评论区。

    商家详情页:主要是商家信息的展示,商家实景图是当图片官渡超过页面宽度时可以左右滚动,当整个页面超过手机高度,可以上下滚动,有一个收藏区块,可以点击收藏关注商家。

2)组件拆分

由于是组件化的开发,整个页面可以看成App.vue一个大组件。

大组件包含头部(header),导航区(主要控制下面内容部分的切换),内容部分包含商品(goods),评价(ratings),商家(seller)三个组件。

2. 图片素材

1)设备像素比

移动端一张图片需要2x和3x,来适应不同dpr(device picture ratio设备像素比)推荐文章:张鑫旭-设备像素比简单介绍

https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

参考链接:https://www.cnblogs.com/samwu/p/5341056.html

2)SVG图片

SVG是一种矢量图片,它的特点就是当我们把它放大之后图片质量不会下降,在移动端开发过程中,通常会把一些色彩单一的图片做成SVG图片,在CSS中引入图标字体文件。

推荐IcoMoon工具: https://icomoon.io/

网站具体使用方法:点击Icomoon app按钮,会跳转到如下页面,点击Icomoon icon按钮,之后选中所有的SVG文件;选中自己想要的图标后,点击右下角的generate font,可以查看代码。点击preference可以修改字体名称等;点击download按钮,解压后fonts里面就是所有的图标字体文件以及style.css。

项目总结:vue.js2.5饿了么APP(1)概述+项目准备插图(7)

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

    由于项目中的图标(icon)多次使用,并且尺寸(1,2,3,4,四种尺寸)和类型(减、折、特、票),基于此,就不同把这些图标做成一个组件support-ico。

<template><span class="support-ico" :class="iconCls"></span></template>

含有一个动态绑定的class,可以根据传入的props(size,type)改变绑定的class。

Computed计算属性icon Cls(),定义一个数组,数组保存了{'decrease', 'discount', 'special', 'invoice', 'guarantee'},可以根据传入的type和size动态拼接icon的样式。

computed: {
      iconCls() {
        const classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
        return `icon-${this.size} ${classMap[this.type]}`
      }
    }

实现对于不同的类型和大小引入不同的图片。

3. mock数据

准备了一个data.json里面是我们模拟的数据。包含三个部分:seller,goods,ratings

在vue.config.js中写入devServer字段,并且有一个before函数,可以通过app.get来模拟get接口,返回json字段,其中goods,ratings,seller都是通过data.json字段拿到的。

项目总结:vue.js2.5饿了么APP(1)概述+项目准备插图(8)

测试:启动服务之后输入localhost:8080/api/seller会返回json数据。表示mock服务成功了。

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

安装并创建项目,参考链接: https://cli.vuejs.org/zh/guide/installation.html

项目总结:vue.js2.5饿了么APP(1)概述+项目准备插图(9)

项目总结:vue.js2.5饿了么APP(1)概述+项目准备插图(10)

项目入口html在public目录下的index.html,  index.html编译之后会引用main.js(入口js是src目录下的main.js)

.browserslistrc 浏览器,用CSS在不同浏览器可能存在兼容性问题,因此需要对其加前缀---针对于postcss.config.js中的autoprefixer插件()

Eslintrc.js就是eslint的配置

Package.json就是需要的依赖,项目描述

5. 安装cube-ui

移动端比较好用的组件库https://didi.github.io/cube-ui/#/zh-CN

项目总结:vue.js2.5饿了么APP(1)概述+项目准备插图(11)

Theme.styl 列出所有组件的颜色,可以进行修改

Package.json中添加了一个transormModules字段,引用cube-ui组件

Vue.config.js 可以进行额外配置

6. 项目common目录

项目总结:vue.js2.5饿了么APP(1)概述+项目准备插图(12)

1)fonts

存放SVG相关图片的信息

2)stylus

Index.styl 入口文件,里面import icon和base(在main.js需要引入index.styl)

Icon.styl是字体图标的样式(引用了font下面的文件,制作的图标可以通过类名可以访问到icon)

Base.styl定义了基础样式(html和body)

mixin.styl导入了cube-ui的stylus(@import "~cube-ui/src/common/stylus/mixin.styl")

Variable.styl导入cube-ui的一些变量(@import "~cube-ui/src/common/stylus/variable.styl"),同时自己定义了项目的颜色

7. axios封装和数据获取

Axios第三方库获取数据:https://github.com/axios/axios

npm i axios --save

在目录下创建api-helper.js和index.js,对于所有的get方法进行封装

/*helper.js*/
import axios from 'axios'

const ERR_OK = 0

export function get(url) {
  return function(params) {
    return axios.get(url, {
      params
    }).then((res) => {
      const { errno, data } = res.data
      if (errno === ERR_OK) {  // 成功
        return data
      }
    }).catch(() => {
    })
  }
}
/*index.js*/
import { get } from './helpers'

const getSeller = get('/api/seller')
const getGoods = get('/api/goods')
const getRatings = get('/api/ratings')
export {
  getSeller,
  getGoods,
  getRatings
}

8. 1像素border实现

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

在PC端是1像素边框,但是在手机端有设备像素比,所以可能看上去会有不同

设计一个mixin.styl

border-1px($color)
    position: elative
    &:after
        diaplay: block
        position: absolute
        left: 0
        bottom: 0
        width: 100%
        border-top: 1px solid $color
        content: ' '

对于需要添加1像素边框的标签加上border-1px类,然后对伪类进行缩放

@media(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
    .border-1px
        &::after
            -webkit-transform: scaleY(0.7)
            transform: scaleY(0.7)
@media(-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
    .border-1px
        &::after
            -webkit-transform: scaleY(0.5)
            transform: scaleY(0.5)

1像素border实现:伪类(绝对定位)+ 缩放(对伪类Y轴缩放),

另一种思路是在html的header里添加如下一句:

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

参考连接:https://www.cnblogs.com/wisewrong/p/6425315.html

https://www.jianshu.com/p/fa670b737a29

 

下一节:项目总结:vue.js2.5饿了么APP(2)项目组件设计实现

没有账号? 忘记密码?

社交账号快速登录