vue中rem如何配置

末蓝、 2022-04-02 15:54 340阅读 0赞

# vue中rem的配置 #

##### 开发移动端，我们常常会因为把握不好尺度而觉得十分难受，因此可以用到rem+flex进行，那么vue中我们该如何如何配置呢？ #####

1.  在js中统一计算进行配置  
    新建src/utils/rem.js 代码如下：

然后：在main.js中进行引入：

// 样式适应处理
    import Rem from './utils/rem';
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      router,
      store,
      template: '<App/>',
      components: {  App },
    });
    
    Rem.setFontSize();

当然！！！！！不能忘记设置默认大小  
在asstes/gloabl.less中设置默认大小

//通用样式
    body{ 
      font-family: "PingFangSC-Regular","PingFang SC","兰亭黑","Helvetica",sans-serif;
      color: @color-text;
      font-size: 14px;
      // font-sizt: 0.28rem; 375屏时
      background-color: @color-background;
    }

记得要在main.js中引入

// 自定义样式
    require('./assets/css/global.less');
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      router,
      store,
      template: '<App/>',
      components: {  App },
    });
    
    Rem.setFontSize();

2.借助px2rem 插件

*  引入

npm install  px2rem-loader  lib-flexible --save 
                          or
    yarn add px2rem-loader lib-flexible --save

*  在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

*  在build下的 utils.js中，找到generateLoaders 方法，在这里添加 。

const px2remLoader = { 
      loader: 'px2rem-loader',
      options: { 
      remUnit: 37.5
      }
    }
    
    function generateLoaders (loader, loaderOptions) { 
    const loaders = [cssLoader, px2remLoader]
     if (loader) { 
       loaders.push({ 
       loader: loader + '-loader',
       options: Object.assign({ }, loaderOptions, { 
         sourceMap: options.sourceMap
       })
     })
    }

重启项目，会发现自己设置的px被转为rem 了  
以上实现转换适用于：  
（1）组件中编写的下的css  
（2）从index.js或者main.js中import ‘…/…/static/css/reset.css’引入css  
（3）在组件的中引入css

另外的情况不适用：  
（1）组件中@import “…/…/static/css/reset.css (可考虑上面（2）、（3）的形式引入)  
（2）外部样式:  
（3）元素内部样式：style=”height: 417px; width: 550px;”

# vue-cil 3.0 px自动转换为rem适配移动端 #

### 1.下载postcss-pxtorem、lib-flexible； ###

npm install lib-flexible --save-dev
    npm install postcss-pxtorem --save-dev

### 2.配置main.js ###

import 'lib-flexible/flexible' // px自动转rem

### 3.根路径配置postcss.config.js ###

module.exports = { 
      plugins: { 
        autoprefixer: { },
        "postcss-pxtorem": { 
          "rootValue": 75, // 设计稿宽度的1/10,
          "propList": ['*'],// 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
        }
      }
    }