vue3移动端项目使用postcss-pxtorem实现px自动转换为rem及amfe-flexible是配置可伸缩布局

2024-06-23 阅读：1254 类型：前端分类：Vue 标签： Vue

简介：postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位。amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10.

使用方法：

1、安装

使用yarn 安装：

yarn add postcss-pxtorem@5.1.1 amfe-flexible -S

或使用npm安装

npm install postcss-pxtorem@5.1.1 amfe-flexible --save

2、创建vue.config.js

在根目录创建vue.config.js文件，添加如下配置代码

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

3、引入

在main.js文件中加入以下代码

import 'amfe-flexible'

4、使用

<template>
 <div class="app">这是app组件</div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
.app{ width: 500px; height: 500px; background: red}
</style>

5、重启项目，使其生效