vue rem自适应布局如何实现？

找到main.js，代码如下所示，不要忘记created内的代码，写完就可以在页面里尽情的撸代码了（页面中写代码时把设计稿除以100即可，例如：100px就是1rem）：

new Vue({
  router,
  store,
  render: h => h(App),
  created() {
    // 实例创建完成后被立即调用rem换算方法,解决内容闪现问题
    setRemPc()
    window.addEventListener('resize', setRemPc) //浏览器窗口大小改变时调用rem换算方法
  }
}).$mount('#app')

//rem计算
function setRemPc() {
  var whdef = 100 / 1920 // 表示1920的设计图,使用100PX的默认值
  var bodyWidth = document.body.clientWidth // 当前窗口的宽度
  var rem = bodyWidth * whdef // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
  document.getElementsByTagName('html')[0].style.fontSize = rem + 'px'
}