1.首先，我们需要保证项目是使用vue-cli搭建的，vue-cli内部使用了PostCss，可以直接安装postcss-pxtorem，如果是使用vite搭建的项目请自行安装PostCss并配置

2.使用命令行安装npm i postcss-pxtorem@5.1.1（此处降版本安装，5.1.1版本后会报错）

3.编写rem.js文件，并在main.ts中进行引用

// 设置 rem 函数
function setRem () {
	// 基准大小，一般为设计稿宽度的1/10或1/20，以此来计算页面的总rem，例如此处页面的总宽度为750/32rem
	const baseSize = 32
	// 缩放，此处分母填写的750为设计稿宽度
	const scale = document.documentElement.clientWidth / 750;
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.addEventListener('resize', () => setRem());

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './utils/rem.js'

createApp(App).use(store).use(router).mount('#app')

4.在根目录下编写postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 32, // 与rem.js下的baseSize保持一致
      selectorBlackList: ['.van', 'van-'], // 要忽略的选择器并保留为px。
      minPixelValue: 2, // 设置要替换的最小像素值。
      propList: ['*'] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
    }
  }
};

之后在页面中就可以根据设计稿上的px对应大小进行编写。