在这里我会把开发音乐播放器项目中遇到的知识点记下来，方便自己学习，同时是对自己的记录。

1.Vue批量注册组件

学习一个新项目时遇到的一个知识点，复用率高的基础组件可以批量进行注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
install(Vue) {
    const requireComponent = require.context(
        "@/components/base", // 引入组件的根目录
        true, //是否需要查找下级目录
        /[a-z0-9]+\.(jsx?|vue)$/i
    )
    // 批量注册基础组件
    requireComponent.keys().forEach(fileName => {
        // 当前获取组件的配置数据
        const componentConfig = requireComponent(fileName)
        // 获取该组件的 default.name 属性
        const componentName = componentConfig.default.name
        if (componentName) {
            // 注册组件
            Vue.component(componentName, componentConfig.default || componentConfig)
        }
    });
}

2.移动端适配方案Rem

使用rem进行移动端适配是现在主流的适配方案，需要将设计师的px稿件转换成rem，然后用js实现根字体随屏幕尺寸变换，从而达到移动端适配的效果。我这次项目学习了使用postcss-pxtorem插件进行rem自动计算。

postcss-pxtorem插件的使用

先在开发环境安装插件

1
npm i -D postcss-pxtorem

接着在package.json文件中配置插件

1
2
3
4
5
6
7
8
9
10
11
"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 14,    //设计稿根字体尺寸
        "propList": [       //需要转换的元素列表
          "*"
        ]
      }
    }
  }

现在已经可以将px转换成rem了，接下来要根据设备屏幕尺寸变换根字体尺寸，需要在vue程序入口加载一个rem.js文件,我这里还使用了lodash-es插件实现函数节流(throttle),先安装插件再使用

1
npm i --save lodash-es
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//rem.js
import { throttle } from 'lodash-es'

const baseSize = 14
let htmlFontSize
!(function() {
    const calc = function() {
        // 这里限制根字体在14~18之间，太小太大不好看
        const maxFontSize = 18
        const minFontSize = 14
        const html = document.getElementsByTagName('html')[0]
        const width = html.clientWidth
        // 1440为设计搞尺寸，这里计算变换后的根字体尺寸
        let size = baseSize * (width / 1440)
        size = Math.min(maxFontSize, size)
        size = Math.max(minFontSize, size)
        html.style.fontSize = size + 'px'
    }
    calc()
    window.addEventListener('resize', throttle(calc(), 500))
})

3.Vue按需导入Element-UI组件

使用babel-plugin-component插件进行插件管理
安装babel-plugin-component

1
npm i -D babel-plugin-component

安装element-ui

1
npm i element-ui

在babel.config.js中添加配置element-ui插件

1
2
3
4
5
6
7
8
9
plugin: [
    [
        'component',
            {
                libraryName: 'element-ui',
                styleLibraryName: 'theme-chalk'
            }
    ]
]

接着就可以按需加载element-ui组件

4.使用v-lazyload插件实现图片懒加载

图片懒加载在项目开发里比较常用，使用vue-lazyload先在生产环境安装插件

1
npm i vue-lazyload

使用很简单，在img标签中添加v-lazy属性写上图片地址即可

1
<img v-lazy="imgUrl">

5.实现网页全屏与退出

document自带requestFullscreen方法可以全屏模式，退出使用自带的exitFullscreen方法，判断是否全屏模式有fullScreen方法，为了兼容可以使用以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 进入全屏模式
function requestFullscreen(ele) {
    if (ele.requestFullscreen) {
        ele.requestFullscreen()
    } else if (ele.msRequestFullscreen) {
        ele.msRequestFullscreen()
    } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen()
    } else if (ele.webkitRequestFullScreen) {
        ele.webkitRequestFullScreen()
    }
}
// 退出全屏模式
function exitFullscreen() {
    const pDoc = window.parent.document
    if (pDoc.exitFullscreen) {
        pDoc.exitFullscreen()
    } else if (pDoc.msExitFullscreen) {
        pDoc.msRequestFullscreen()
    } else if (pDoc.mozCancelFullScreen) {
        pDoc.mozRequestFullScreen()
    } else if (pDoc.webkitCancelFullScreen) {
        pDoc.webkitRequestFullScreen()
    }
}
// 判断是否全屏
function isFullScreen() {
    return document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen
}