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方法
