Vue项目《仿饿了么》总结一

api接口mock数据

• 在vue.config.js文件中新建devServer的配置项
• devServer配置项接收一个Object的值，为对象新增一项数据：属性名为before，属性值为一个function
  • 

  • app.get('/some/path', function(req, res) {
       res.json({ custom: 'response' });
    })

    app.get()处理业务：模拟Get接口，当服务器接收到/some/path对应接口的请求时，会执行后面的回调函数，回调函数中的res.json表示返回一个对象，对象的内容自定义即可

---

关于通用小图标组件的封装问题

在项目中使用到的小图标，例如：

封装形式：

将图标组件的大小和类型设计成为props属性【属性的类型都是数字类型Number】，由调用者自定义即可，图标的图片路径用单独的样式定义，设计对应的类名区分，将这些类名全部封装在一个数组中，再设计一个计算属性，计算属性返回通过大小和类型值拼接出不同的类名，从而显示不同的样式

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

封装形式：

将图标组件的大小和对应的评价分数设计成为props属性【属性的类型都是数字类型Number】，由调用者自定义即可，图标组件的大小对应着不同的样式，这里的样式只是简单的尺寸大小。将确定星星图标具体如何显示【几颗是亮着的，几颗是暗着的，是否有半星】的类名设置为计算属性，计算属性返回不同的伪类字符串数组，通过伪类来确定不同的样式，具体的计算逻辑处理：

默认四舍五入的计算方式【4.1-4.4为4星、4.5-4.9为4星半、5为5星】

• 处理分数，将整数单独分离出来，判断是否有小数位
• 利用循环，将其对应的伪类字符串【满颗星】放入到数组中
• 如果有小数位，将其对应的伪类字符串【半颗星】放入到数组中
• 如果最终数组的长度不足5，将其对应的伪类字符串【灰色星】放入到数组中

itemClasses(){
   let result = []
   let score = Math.floor(this.score * 2) / 2
   let hasDecimal = score % 1 !== 0
   let integer = Math.floor(score)
   for (let i = 0; i < integer; i++) {
     result.push(CLS_ON)
   }
   if (hasDecimal){
     result.push(CLS_HALF)
   }
   while (result.length < LENGTH) {
     result.push(CLS_OFF)
   }
   return result
}

---

create-api 模块

官方文档介绍

当项目中有弹窗需求【在body下直接增加、删除新的html结构，它的直接父级是body】的时候，除了传统的方法，我们可以使用create-api模块【该模块默认暴露出一个 createAPI 函数，可以实现以 API 的形式调用自定义组件。并且既可以在 Vue 实例上下文中调用，也可以在普通 js 文件中调用】，具体使用方法如下：

步骤一：

import { createAPI } from 'cube-ui'
import Vue from 'vue'
import HeaderDetail from 'components/header-detail/header-detail'
import ShopCartList from 'components/shop-cart-list/shop-cart-list'
import ShopCartSticky from 'components/shop-cart-sticky/shop-cart-sticky'
import Food from 'components/food/food'
createAPI(Vue, HeaderDetail)
createAPI(Vue, ShopCartList)
createAPI(Vue, ShopCartSticky)
createAPI(Vue, Food)

单独创建一个js文件，统一向全局Vue注册自定义组件：首先import自定义的组件【租定义组件一定要定义自己的名字】，然后再通过createAPI函数注册组件，最后在main.js文件中import这个js文件

步骤二：

const instance = this.$createHello({
  $props: {
    content: 'My Hello Content',
  },
  $events: {
    click() {
      console.log('Hello component clicked.')
      instance.remove()
    }
  }
})

当需要调用弹窗组件的时候，我们可以直接通过 this.$create[组件名称的驼峰形式](config, renderFn) 调用该组件。

• config：表示当前弹窗组件需要传入的props、events数据[$props对象的属性值写成字符串形式，就会产生响应式，也就是说属性值一旦发生变化，API组件中对应的数据也会发生变化]

步骤三：

instance.show()

当弹窗组件创建完成，并且已经绑定好数据之后，我们需要通过调用弹窗组件自定义的show、hide方法来控制组件的显示或隐藏

具体的显示/隐藏可以通过自定义一个visible属性来控制：

• show ------ visible：false
• hide ------- visible：true

---

mixin的应用

定义：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

简而言之，当有多个组件都含有相同的数据/方法，那么我们可以将这些相同的代码提取到一个新的js文件中，通过export default，向外面暴露一个对象，对象里就是提取的代码，然后其它组件需用复用时，直接import引入，然后通过mixins属性名接收即可。

// 定义一个混入对象common.js
export default{
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
import myMixin from 'common'
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

关于mixin使用的注意事项

---

Tab组件的抽象与封装

由于考虑到后期可能会增加或删除一些Tab栏，所以我们需要对Tab组件做一层抽象和封装。将Tab组件的业务主要调整为：根据调用者传入的数据，来处理其结构、样式和交互效果，这样不会因为后期的Tab栏数据的增删，而去修改Tab组件的代码。由于Tab组件中还引用了其它的组件，我们只需要使用component组件，根据is属性动态显示组件即可，而需要的组件实例数据同样也是调用者提供。

数据格式：

{
   label: '商品',
   component: Goods,
   data: {
     seller: this.seller
   }
}

• label：Tab栏显示的文字
• component：每一个选项对应的页面组件
• data：每一个组件所需要的数据

---

Tab栏对应页面数据的请求加载问题

只有在切换到对应的Tab栏，对应的页面才会开始请求数据，因此不能在每个Tab栏对应页面的created生命周期函数请求数据

解决办法：

• 在每个Tab栏对应页面中都定义一个方法(fetch)，方法中实现了请求数据的业务逻辑
• 在监听Tab栏改变的方法里，统一调用每个对应组件页面的fetch方法