Vue mobile adaptation

The project is developed by VUE-CLI3.0. Through my research and practice, four solutions are provided here, which are effective in personal testing.

Lib-flexible + postCSS-plugin-px2REM

1. Install Px2REM-loader (convert CSS PX to REM)

 npm install px2rem-loader --save-dev
Copy the code

2, mobile adaptation solution NPM package “lib-flexible”

npm install lib-flexible --save
Copy the code

3, introduce “lib-flexible” in main.js

import 'lib-flexible'
Copy the code

4. Install postCSs-plugin-px2REM

npm install postcss-plugin-px2rem --save-dev
Copy the code

5. Configure it in vue.config.js

 module.exports = {
          lintOnSave: true.css: {
              loaderOptions: {
                  postcss: {
                      plugins: [
                          require('postcss-plugin-px2rem') ({rootValue: 75.// Set the font size of the root tag to 1rem 50px, so that you can measure the number of px from the design and write more px directly in the code.
                              // unitPrecision: 5, // The decimal number to allow REM units to grow to.
                              //propWhiteList: [], // The default is an empty array, which means to disable whitelist and enable all properties.
                              // propBlackList: [], // blacklist
                              exclude: /(node_module)/.// The default is false. You can (reg) exclude certain folder methods using regular expressions, such as /(node_module)\/ If you want to convert px in the front-end UI framework to REM as well, set this property to default
                              // selectorBlackList: [], // To ignore and keep the selector as px
                              // ignoreIdentifier: false, // (Boolean /string) Method of ignoring individual attributes. With ignoreIdentifier enabled, replace is automatically set to true.
                              // replace: true, // (Boolean) Replace rules containing REM instead of adding fallbacks.
                              mediaQuery: false.// (Boolean) allows conversion of PX in media queries.
                              minPixelValue: 3 // Set the minimum pixel value to be replaced (3px will be transferred to REM). The default 0}),]}}}}Copy the code

Lib -flexible + postCSS-px2REM-exclude

1. Install Px2REM-loader (convert CSS PX to REM)

npm install px2rem-loader --save-dev
Copy the code

2, mobile adaptation solution NPM package “lib-flexible”

npm install lib-flexible --save
Copy the code

3, introduce “lib-flexible” in main.js

import 'lib-flexible'
Copy the code

4. Install postCSS-px2REM-exclude.

npm install postcss-px2rem-exclude --save-dev
Copy the code

5. Configure it in vue.config.js

 module.exports = {
          lintOnSave: true.css: {
              loaderOptions: {
                  postcss: {
                      plugins: [
                          require('postcss-px2rem-exclude') ({remUnit: 75.// convert the base,
                              exclude: /(node_module)/.// By default false, regular expressions can be (reg) utilized}),]}}}}Copy the code

Lib-flexible + PostCSS-px2REM

1. Install Px2REM-loader (convert CSS PX to REM)

npm install px2rem-loader --save-dev
Copy the code

2, mobile adaptation solution NPM package “lib-flexible”

npm install lib-flexible --save
Copy the code

3, introduce “lib-flexible” in main.js

import 'lib-flexible'
Copy the code

4. Install postCSS-px2REM

npm install postcss-px2rem --save-dev
Copy the code

5. Configure it in vue.config.js

 module.exports = {
          lintOnSave: true.css: {
              loaderOptions: {
                  postcss: {
                      plugins: [
                          require('postcss-px2rem') ({remUnit: 75.// convert the base,}),]}}}}Copy the code

Lib-flexible + PostCSS-pxtoREM

1. Install Px2REM-loader (convert CSS PX to REM)

npm install px2rem-loader --save-dev
Copy the code

2, mobile adaptation solution NPM package “lib-flexible”

npm install lib-flexible --save
Copy the code

3, introduce “lib-flexible” in main.js

import 'lib-flexible'
Copy the code

4. Install postCSS-pxtorem

npm install postcss-pxtorem --save-dev
Copy the code

5. Configure it in vue.config.js

 module.exports = {
          lintOnSave: true.css: {
              loaderOptions: {
                  postcss: {
                      plugins: [
                          require('postcss-pxtorem') ({rootValue : 1.// The base of conversion
                              selectorBlackList  : ['weui'.'mu'].// Ignore the transformation re match
                              propList   : [The '*'],}),]}}}}Copy the code