在Vue 3中实现 rem 布局的实践方法

在Vue中使用rem布局，通常需要结合CSS预处理器和适配方案来实现。如下是一个使用Sass和lib-flexible适配方案的示例：

1. 安装依赖：首先，在Vue项目中安装必要的依赖。运行以下命令来安装sass-loader和postcss-px2rem：

npm install sass-loader postcss-px2rem --save-dev

1. 配置Webpack：在Vue项目的Webpack配置文件中，添加对Sass和PostCSS的支持和配置。例如，在vue.config.js或webpack.config.js中添加以下代码：

module.exports = {
   
  css: {
   
    loaderOptions: {
   
      sass: {
   
        additionalData: `@import "@/styles/global.scss";` // 导入全局样式文件
      },
      postcss: {
   
        plugins: [
          require("postcss-px2rem")({
   
            remUnit: 75 // 设计稿的尺寸除以10，例如设计稿宽度为750px，则remUnit为75
          })
        ]
      }
    }
  }
}

注意：如果是使用 vite 配置时就有所不同，如下：

配置 Vite：在项目根目录下找到 vite.config.js 文件，并添加如下代码：

import {
    defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
   
  plugins: [vue()],
  css: {
   
    preprocessorOptions: {
   
      scss: {
   
        additionalData: `@import "@/styles/global.scss";`, // 导入全局样式文件
      },
    },
  },
});

1. 创建全局样式文件：在Vue项目中创建一个全局样式文件，例如global.scss。在该文件中，可以定义rem单位的基准大小和一些全局样式。

// global.scss
$baseSize: 75; // 设计稿的尺寸除以10，例如设计稿宽度为750px，则baseSize为75

// rem转换函数
@function pxToRem($px) {
  @return ($px / $baseSize) * 1rem;
}

// 设置全局字体大小
html {
  font-size: 14px; // 将基准字体大小设置为14px
  font-size: pxToRem(14); // 使用rem单位，根据基准大小计算实际字体大小
}

1. 引入适配方案：在Vue项目的入口文件（例如main.js）中引入适配方案，这里使用lib-flexible。运行以下命令安装lib-flexible：

npm install lib-flexible --save

1. 然后，在入口文件中添加以下代码：

import 'lib-flexible'; // 引入适配方案
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
   
  render: h => h(App),
}).$mount('#app');

1. 导入全局样式文件：在每个需要应用全局样式的组件中导入全局样式文件。可以使用@import指令将全局样式文件引入到组件中。

<template>
  <div class="container">
    <p class="text">Hello, Vue!</p>
  </div>
</template>

<style scoped lang="scss">
@import "@/styles/global.scss"; // 导入全局样式文件

.container {
    
  width: 7.5rem; // 设计稿中宽度为750px
  height: 3rem; // 设计稿中高度为300px
}

.text {
    
  font-size: 0.14rem; // 设计稿中字体大小为14px
}
</style>

小结：

对于适配方案，将lib-flexible引入到入口文件中可以实现根据设备屏幕尺寸自动调整rem单位的大小，以适应不同的屏幕。而全局样式文件的导入则确保了全局样式定义能够应用到需要的组件中。