vue移动端项目注重点

module.exports = {
//配置configwebpack
  configureWebpack: {
  //解决路径相关的问题
    resolve: {
    //配置别名
      alias: {
        assets: "@/assets",
        common: "@/common",
        components: "@/components",
        network: "@/network",
        views: "@views"
      }
    }
  }
};

//去除图片跟文字中间的空间
vertical-align:middle

组件里面的data是一个函数的原因是：因为一个组件可能多次调用在一个页面使用，函数的好处就是调用它的时候，会在栈里面开辟一个新的地址，所以他们不会指向一个地址，也就解决了：如果有双向绑定时，一个组件里面的表单内容发生改变，导致整个页面的表单都会发生改变

github中 better-scroll 移动端滑动框架
BetterScroll是一个插件，旨在解决移动端的滚动情况（已支持PC）

使用
安装 npm install better-scroll --save
导入
import BScroll from ‘better-scroll’

外层必须包裹一个div

 <div class="wrapper">
 <div class="content">
 </div>
 </div>

mounted() {
    // 创建Bscroll对象
    this.scroll = new BScroll(this.$refs.wrapper, {
      observeDOM: true,
      click: true,
      probeType:3,
      pullUpLoad: true
    })
    // 监听滚动的位置
    this.scroll.on('scroll', position => {
      this.$emit('scroll', position)
    })
    //上拉加载更多
    this.scroll.on('pullingUp', () => {
      this.$emit('pullingUp')
    })
  },
  methods: {
    scrollTo(x, y, time) {
      this.scroll.scrollTo(x, y, time)
    },
    // 上拉加载更多
    finishPullUp() {
      this.scroll.finishPullUp()
    },
    // 重新加载
    refresh() {
      this.scroll.refresh()
    }
  }
//使用重新刷新
 this.$refs.scroll.refresh()

**ref使用

事件总线

首先在main.js中
Vue.prototype.$bus = new Vue()
孙子组件
this.$bus.$emit('itemImageLoad')

爷爷组件
this.$bus.$on('itemImageLoad', () => {
      this.$refs.scroll.refresh()
    })

防抖动处理
防抖debounce 节流throttle

 //  防抖函数
    debounce(func, delay) {
      let timer = null
      return function(...args) {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
          func.apply(this, args)
        }, delay)
      }
    }

使用

 const refresh = this.debounce(this.$refs.scroll.refresh)

refresh()

所有组件都用一个属性$el:用于获取组件中的元素
@load监听图片加载

时间化格式字符串

mixin的使用

一般单建个文件mixin.js文件

exprot const mixin={
要混入的内容
}

在别的文件中使用
mixins：[mixin]