vue仿小米商城知识总结

1.使用 vue-axios  vue.use(VueAxios, axios)   通过this.axios访问

2.使用vue-axios  不能 axios.create({}),需要  axios.defaults.baseURL = '/api'   axios.defaults.timeout = 8000

3.在ts中使用mockjs   需要加  npm i "@types/mockjs" main.ts  按需引入  

　　const isMock = true

　　if (isMock) require('./mock/api')

 

4.

 

滑动图标的展示：通过margin  和 transition 实现

 

5. @minix 定义函数  @include 使用 eg:

@mixin flex($hov:space-between,$col:center){
　　display:flex;
　　justify-content:$hov;
　　align-items:$col;
}

@include flex(flex-start, center);

6.伪类的写法 &:hover:before  &:before  &:last-child:before

7.绑定数据 :href="'/login'+item.id"

8. storage的封装

/**
 * Storage封装
 */
const STORAGE_KEY = 'mall'

export default {
  setStore(key: string, value: any, module_name?: string) {
    if (module_name) {
      let val = this.getStore(module_name)
      val[key] = value
      this.setStore(module_name, val)
    } else {
      let val = this.getStorage()
      val[key] = value
      window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val))
    }
  },

  getStore(key: string, module_name?: string) {
    if (module_name) {
      let val: any = this.getStore(module_name)
      if (val) return val[key]
    }
    return this.getStorage()[key]
  },

  removeStore(key: string, module_name?: string) {
    let val = this.getStorage()
    if (module_name) {
      if (!val[module_name]) return
      delete val[module_name][key]
    } else {
      delete val[key]
    }
    window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val))
  },

  getStorage() {
    return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}')
  }
}

9.vertical-align:middle 控制图片和文字对齐

10.hover选择父级元素

关于hover选择器：
1：改变选择元素本身
　　.xxx:hover{}
2:改变元素的子无素
　　.xxx:hover xxx{}
3:改变元素的相邻元素
　　.xxx:hover + xxx{}

4:选择元素的之后所有同级元素

.xxx:hover ~ xxx{}

11.如果采取导航的菜单和内容分离渲染的做法，利用vue的$refs实现

@mouseover="$refs.content.style.display = 'block'"
              @mouseleave="
                $nextTick(() => {
                  $refs.content.style.display = 'none'
                })
              "

12.