vue使用rem自适应布局（初级）

1.先在搭建号的项目中下载两个插件：

npm i amfe-flexible
npm i postcss-plugin-px2rem

 2.在main.js文件夹里面引入amfe-flexible

 3.新建一个rem.js文件夹，并导入到main.js：

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

4.新建一个vue.config.vue

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require("postcss-plugin-px2rem")({
                        // 换算基数，
                        rootValue: 192,
                        //允许REM单位增长到的十进制数字,小数点后保留的位数
                        unitPrecision: 5,
                        propList: ["*"],
                        //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
                        exclude: /(node_module)/,
                        //（布尔值）允许在媒体查询中转换px。
                        mediaQuery: false,
                        //要忽略并保留为px的选择器，本项目我是用的vant ui框架，所以忽略他
                        // selectorBlackList: [".van"],
                        //设置要替换的最小像素值
                        minPixelValue: 1,
                    }),
                ],
            },
        },
    },

}

5.重新运行代码即可自动转化为rem

备注：具体的配置我还没搞懂，先这样写