Vue&TypeScript总结

1.解决refs报错

通过vue-property-decorator提供给我们的装饰器一劳永逸的将该refs添加到computed属性上
import { Vue, Component, Ref } from 'vue-property-decorator'

2.px转rem
新建rem.ts文件

// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem()
}

在main.ts中引入rem.ts文件

import 'Assets/ts/rem.ts'

安装依赖

npm install postcss-pxtorem -D

新建配置文件 postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      "rootValue": 16,
      "propList": ["*"]
    }
  }
}

重启项目即可