Enseñarle paso a paso cómo implementar Vue para la adaptación de PC y terminales móviles.

1. Solución de adaptación (amfe-flexible + postcss-pxtorem)

amfe-flexible: establece automáticamente el tamaño de fuente de html según el ancho de la pantalla
postcss-pxtorem: convierte automáticamente unidades px a rem

2. Instale el complemento

​​​​​​​npm install postcss-pxtorem --save

npm install amfe-flexible --save

3. Introduzca lib-flexible en main.js en el proyecto vue

import 'amfe-flexible';

4. Configurar postcss-pxtorem

Se puede configurar en uno de vue.config.js, .postcssrc.js y postcss.config.js. El peso disminuye de izquierda a derecha. Si no hay ningún archivo nuevo, solo necesita configurar uno de ellos.

1. Configure de la siguiente manera en vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 37.5,
                        propList: ['*']
                    })
                ]
            }
        }
    },
}

2. O configúrelo en .postcssrc.js o postcss.config.js de la siguiente manera:

module.exports = {
		    "plugins": {
		        'postcss-pxtorem': {
		            rootValue: 37.5,
		            propList: ['*']
		        }
		    }
		}

  Nota:
(1) RootValue se establece de acuerdo con el ancho del borrador de diseño dividido por 10. Aquí se supone que el borrador de diseño es 375, es decir, rootValue se establece en 37,5;

(2) propList es para establecer las propiedades que deben convertirse, aquí * se convierte para todos.

5. Suplemento

Si ocurre un error, baje la versión y reinstale las dependencias (modifique la versión en el archivo package.json a lo siguiente y luego ejecute el comando npm install en la terminal)

 "dependencies": {
    "amfe-flexible": "^2.2.1",
    "postcss-pxtorem": "^5.1.1",
  },

6. Pruebe si la configuración surte efecto

1. Establezca el ancho de un determinado nombre de clase en CSS en 375 px:

.box{
  width: 375px;
}

2. Después de ejecutarlo, puede encontrar en el navegador que se ha convertido a 10rem, que es 375/el conjunto de valores raíz:

3. La situación anterior indica que postcss-pxtorem se ha configurado correctamente.