vue-element-admin

1 vue-cli中，使用scss引入样式文件，可使用 ~@ 表示 src 目录

2

https://www.cnblogs.com/bainianminguo/p/10575763.html

3 判断是否手机

$_isMobile() {
      const rect = body.getBoundingClientRect()
      return rect.width - 1 < WIDTH
    },
	
const WIDTH = 992 // refer to Bootstrap's responsive design

getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。
该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；
这里的top、left和css中的理解很相似，width、height是元素自身的宽高

4 resize 事件是在浏览器窗口大小发生变化时触发，利用该事件可以跟踪窗口大小的变化来动态调整页面的元素显示。

  beforeMount() {
    window.addEventListener('resize', this.$_resizeHandler)
  }
  
addEventListener(event, function, useCapture);
第一个参数是事件的类型（如“ click”或“ mousedown”）。
第二个参数是我们想要在事件发生时调用的函数。
第三个参数是一个布尔值，指定是使用事件冒泡还是事件捕获。此参数是可选的。

回调函数
	$_resizeHandler() {
      if (!document.hidden) {
        const isMobile = this.$_isMobile()
        store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')

        if (isMobile) {
          store.dispatch('app/closeSideBar', { withoutAnimation: true })
        }
      }
    }