Vue仿饿了么app项目总结

// app.vue
 
home
about

// router: index.js

import Vue from "vue";
import Router from "vue-router";
import goods from "components/goods/goods.vue";
import ratings from "components/ratings/ratings.vue";
import seller from "components/seller/seller.vue";

Vue.use(Router);

const routes = [{
  path: "/",
  redirect: "/goods"
}, {
  path: "/goods",
  component: goods
}, {
  path: "/ratings",
  component: ratings
}, {
  path: "/seller",
  component: seller
}];

export default new Router({
  routes,
  linkActiveClass: "active"
});

在vue1.x的时候，vue的官方推荐HTTP请求工具是vue-resource，但是在vue2.0的时候将推荐工具改成了axios。

如果想像以前使用 vue-resource 那样 this.$http.get 调用，要这样定义：

Vue.prototype.$http = axios;

通过 this.$http.get 来定义通过vue实例来发送get请求，然后通过then后面的回调函数将请求成功的数据接收，通过状态码来判断是否成功以及复制给vue的数据对象。由于这里是用的mock数据（模拟后台数据），所以用的模拟状态码。

const ERR_OK = 0;//表示没有错误信息，即获取数据成功
this.$http.get("/api/seller").then((response) => {
  response = response.data;
  if (response.errno === ERR_OK) {
    this.seller = Object.assign({}, this.seller, response.data);
  }
});

vue是组件式开发，所以组件间通讯是必不可少的

父传子: props

子传父: $emit

兄弟通讯: 1. event bus: 利用一个中间组件来作为信息传递中介；2. vuex: 信息树

vue提供了一种方式，即在子组件定义 props 来接受父组件传递来的数据对象。

// 父组件


// 子组件 header.vue
props: {
  seller: {
    type: Object
  }
}

如果是子组件想传递数据给父组件，需要派发自定义事件，使用 $emit 派发，
父组件使用v-on接收监控（v-on可以简写成@）

// 子组件 RatingSelect.vue，派发自定义事件isContent，将this.onlyContent数据传给父级

this.$emit("isContent", this.onlyContent);
this.$emit("selRatings", this.selectType);

// 父组件 foodInfo.vue 在子组件的模板标签里，使用v-on监控isContent传过来的数据

大型项目可以用 Vue官方推荐的vuex

EventBus ：https://n-y.io/vue-eventbus/

子组件A $emit 派发具体事件，由父组件 @ 监听得到数据

父组件再利用 $refs 直接访问子组件B的方法，间接实现数据从子组件A传递至子组件B

将相同样式或功能的区块多带带提出来，作为一个组件。
另外组件中用到的图片等资源就近维护，即可以考虑在组件文件夹中新建images文件夹。

抽离组件遵循原则：
要尽量遵循单一职责原则，复用性更高，不要设置额外的margin等影响布局的东西

想要达到这种目的，有两种方法，一种是利用重定向，另一种是利用vue-router的导航式编程。

//在router的index.js文件中设置，要多写一个对象，指向目标组件

Vue.use(Router);

const routes = [{
  path: "/",
  redirect: "/goods"   // 重定向
}, {
  path: "/goods",
  component: goods
}, {
  path: "/ratings",
  component: ratings
}, {
  path: "/seller",
  component: seller
}];

export default new Router({
  routes,
  linkActiveClass: "active"
});

router.push("/Goods");

生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画

动画的内容分别是外层和内层,外层控制动画小球的轨道和方向,内层控制动画小球自身的运行状态

动画使用vue的js钩子实现

因为小球动画只有一个方向(只执行单方向从上到下滚落),所以只用了before-enter,enter,after-enter

用v-show控制小球的可见性,在动画执行期间可见,其余时候隐藏

    

      

      //用了两种方式的动画,css和js钩子
        
        //外层动画
          

          //内层动画
            

          
        
      
    

设置了balls数组来代表五个小球

设置了dropBalls数组正在运行的小球

 data(){
      return {
        balls: [
          {show: false},
          {show: false},
          {show: false},
          {show: false},
          {show: false}
        ],
        dropBalls: []
      }
    },

只要触发了drop事件,不止是drop事件里面的代码会执行,另外几个vue的js监听钩子也会一起按顺序执行

触发了 drop 事件

beforeDrop 开始执行

dropping 开始执行

afterDrop 开始执行

drop 事件的触发可以通过点击 cartcontrol 组件的添加小球按钮 addCart 事件触发使用 $emit ，也可以父组件 this.$refs.shopcart.drop(target); 直接触发

这么做的目的是实现，在子组件 cartcontrol 点击之后，可以将具体点击的 dom 传给父组件 goods 然后再传给子组件 shopcart，（因为目前他们之间的通道就是这样，shopcart子组件并没有导入cartcontrol子组件，所以没有直接通讯）这样就实现了多个组件之间的通讯（也可以使用 EventBus 和 vuex），从而可以实现需求，例如这里就是实现点击子组件 cartcontrol 后添加一个动画,将小球滑落到另外一个组件shopcart

$emit 是触发当前实例上的事件。附加参数都会传给监听器回调。

methods: {
      drop(el) { 
      //触发一次事件就会将所有小球进行遍历
        for (let i = 0; i < this.balls.length; i++) {
          let ball = this.balls[i];
          if (!ball.show) { //将false的小球放到dropBalls
            ball.show = true;
            ball.el = el; //设置小球的el属性为一个dom对象
            this.dropBalls.push(ball); 
            return;
          }
        }
      },

      beforeDrop(el){ //这个方法的执行是因为这是一个vue的监听事件
        let count = this.balls.length;
        while (count--) {
          let ball = this.balls[count];
          if (ball.show) {
            let rect = ball.el.getBoundingClientRect(); //获取小球的相对于视口的位移(小球高度)
            let x = rect.left - 32;
            let y = -(window.innerHeight - rect.top - 22); //负数,因为是从左上角往下的的方向
            el.style.display = ""; //清空display
            el.style.webkitTransform = `translate3d(0,${y}px,0)`; 
            el.style.transform = `translate3d(0,${y}px,0)`;
            //处理内层动画
            let inner = el.getElementsByClassName("inner-hook")[0]; //使用inner-hook类来单纯被js操作
            inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
            inner.style.transform = `translate3d(${x}px,0,0)`;
          }
        }
      },

      dropping(el, done) { //这个方法的执行是因为这是一个vue的监听事件
        /* eslint-disable no-unused-vars */
        let rf = el.offsetHeight; //触发重绘html
        this.$nextTick(() => { //让动画效果异步执行,提高性能
          el.style.webkitTransform = "translate3d(0,0,0)";
          el.style.transform = "translate3d(0,0,0)";
          //处理内层动画
          let inner = el.getElementsByClassName("inner-hook")[0]; //使用inner-hook类来单纯被js操作
          inner.style.webkitTransform = "translate3d(0,0,0)";
          inner.style.transform = "translate3d(0,0,0)";
          el.addEventListener("transitionend", done); //Vue为了知道过渡的完成，必须设置相应的事件监听器。
        });
      },

      afterDrop(el) { //这个方法的执行是因为这是一个vue的监听事件
        let ball = this.dropBalls.shift(); //完成一次动画就删除一个dropBalls的小球
        if (ball) {
          ball.show = false;
          el.style.display = "none"; //隐藏小球
        }
      }
    }

关于 transitionend

关于drop方法,是实现每一个ball的show属性和el属性处理,并且点击一次会自动将一个小球放到 dropBalls 数组里面,放到里面就代表的是一个小球已经被开始执行动画,但是由于动画是异步的,所以先主动设置.

关于 getBoundingClientRect (位移的计算是从左上角开始)

使用 getBoundingClientRect 获取到当前元素的坐标,然后需要位移的left减去元素的宽获取真正的最终位移x坐标

使用 getBoundingClientRect 获取到当前元素的坐标,然后需要当前屏幕的高度减去元素的 top 再减去元素本身的高度获取到真正的最终位移 y 坐标,并且这个是负数,因为是从左上角往下的方向

关于html重绘

因为浏览器对于重绘是有要求并且是有队列完成的,这是主要为了性能,虽然动画隐藏了小球display none,但没有触发html重绘,或者说没有立即触发html重绘,所以需要手动

let rf = el.offsetHeight; 这是一个手动触发html重绘的方法

网页性能管理详解

高性能JavaScript 重排与重绘

    .ball-container
      .ball
        position: fixed //小球动画必须脱离html布局流
        left: 32px
        bottom: 22px
        z-index: 200 
        transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
        .inner
          width: 16px
          height: 16px
          border-radius: 50%
          background: rgb(0, 160, 220)
          transition: all 0.4s linear

关于cubic-bezier(0.49, -0.29, 0.75, 0.41),是动画抛物曲线(贝塞尔曲线)的配置，基于css3实现，参考贝塞尔曲线与CSS3动画、SVG和canvas的基情 ,至于抛物线放在外层就是为了控制内层的元素的轨道和方向的.

整个流程是:

绑定星星类型的class(48,36,24尺寸),使用starType

使用class来显示星星,有3种类型,全星,半星,无星,使用star-item代表星星本身,然后分别使用on,off,half代表三种不同类型的星星

一个span代表一个星星项目,并且使用v-for循环将星星项目输出

最后形成的星星html就类似这样

设置常量是为了方便解耦

星星计算比较巧妙(根据分数转换为星星数)

对于分数score进行乘以2然后向下取整，然后再除以2，是为了获取所有星星的数量，并且这个数量是0.5倍数的,例如4.6 2就是9.2，然后向下取整是9，然后再除以2就是4.5，那么就可以得到一个0.5倍数的星星数，可以转换为4个全星+一个半星

对于非整数的星星算作是半个星星，需要知道是否有存在这种情况，所以分数score%1 ，例如 8 % 1是0，8.5 % 1就不是0，并且这个半星只会出现一次，因为半星状态就只要一个

没有星星的部分是要补全的，这里使用while循环来处理这种情况

引入mixin.styl是为了使用bg-image的mixin,因为之前做了一个mixin是专门处理2x和3x图片的转换

因为这里有3种类型的星星图片,分别是48尺寸,36尺寸,24尺寸,所以对于每一个类别的图片分别使用一种class做对应

每一种星星的尺寸都是有一种相对应的图片的,例如48尺寸的星星就会有,并且图片放在相对应的vue文件目录下

star48_half@2x.png
star48_half@3x.png
star48_off@2x.png
star48_off@3x.png
star48_on@2x.png
star48_on@3x.png

备注:父组件food.vue传入的数据

方法有：@select="selectRating" @toggle="toggleContent"，通过将字组件的方法和父组件的方法进行关联，这样就能够实现跨组件通讯和操作

属性有：:selectType="selectType":onlyContent="onlyContent" :desc="desc":ratings="food.ratings"，这是通过pros传入到子组件的属性，将父组件的数据传到子组件里面，也带有一种通过父组件来初始化子组件属性的意思.

  

  
    

    
      {{desc.all}}{{ratings.length}}
      {{desc.positive}}{{positives.length}}
      {{desc.negative}}{{negatives.length}}
    
    
    

      
      只看有内容的评价
    
  

@click="select(2,$event)" select方法传入类型和事件,然后在methods里面调用父组件的方法,实现子组件控制父组件的目的

:class="{"active":selectType ===2}" 根据类型来确定显示的class,实现不同类型显示不同样式的目的

positives.length 使用计算属性自动计算类型数组的长度,用来显示不同类型的数量

@click="toggleContent" :class="{"on":onlyContent}"

toggleContent 控制是否展示有内容的rate,也是在methods里面调用父组件的方法,实现子组件控制父组件的目的

绑定on这个class来控制该按钮的样式

  const POSITIVE = 0; //设置显示常量
  const NEGATIVE = 1;
  const ALL = 2;

  export default{
    props: {
      ratings: { //传入ratings数组,跟food.ratings关联
        type: Array,
        default(){
          return [];
        }
      },
      selectType: { //跟selectType关联,通过在父组件里面设置这3个值来实现控制子组件的操作
        type: Number,
        default: ALL
      },
      onlyContent: { //跟onlyContent关联
        type: Boolean,
        default: true
      },
      desc: { //跟desc关联
        type: Object,
        default(){
          return {
            all: "全部",
            positive: "满意",
            negative: "不满意"
          }
        }
      }
    },
    computed: {
      positives(){ //自动过滤rateType(正面的rate)
        return this.ratings.filter((rating) => { //js的filter函数会返回一个处理后的(为true)结果的结果数组
          return rating.rateType === POSITIVE;
        })
      },
      negatives(){ //自动过滤rateType(反面的rate)
        return this.ratings.filter((rating) => {
          return rating.rateType === NEGATIVE;
        })
      }
    },
    methods: {
      select(type, event) { // 选择rateType并且通知父组件
        if (!event._constructed) {
          return;
        }
        this.$emit("select", type); // 派发事件，父组件监听此事件
      },
      toggleContent(event) { // 选择是否显示有内容的rate,并且通知父组件
        if (!event._constructed) {
          return;
        }
        this.$emit("toggle");
      }
    }
  }

v-for使用已经很常见了,不过这里需要了解，vue1和2有区别,现在是用vue2,所以index变量传递会变成现在这种模式 (item,index) in goods

vue传递原生事件使用$event

:class="{"current":currentIndex === index}" 是vue的绑定class的使用方法，通过绑定一个class变量来直接操作，并且这里的逻辑会跟js代码里面对应

通过currentIndex和index做对比，来确认是否添加current类，他们之间的对比关系也就是 menu 区域和 foods 区域的显示区域的对比关系

通过添加current类来实现当前页面的区域的样式变化

currentIndex是一个计算属性，可以随时变化并且直接反应到dom上(看js里面逻辑)

v-show 和 v-if 的区别官网已经说过

v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

$refs 的使用是vue操作dom的一种方式:

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例:

hook钩子类的使用,需要结合js里面的语法来看,这个类只是用来操作,不会产生dom的渲染,方便js控制清晰.

是通过selectFood方法写入到vue实例里面,然后传给子组件food

这里selectFoods被自动添加了count属性,是为了让购物车更加简单的计算已选择的food

@import "./base";
@import "./mixin";
@import "./icon.css";

import "common/css/index.scss";

克隆项目到本地
git clone git@github.com:nanyang24/eleme-vue.git

安装依赖
npm install

本地开发，开启服务器，浏览器访问http://localhost:8080
npm run dev

构建生产
npm run build

运行打包文件
node prod.server.js 

会看到 Listening at http://localhost:9000 在浏览器中打开即可