Recently, you may need to do an H5 project on the mobile terminal. I learned that although lib Filexible is commonly used, the viewport is becoming more and more popular, so I want to try to use vw for mobile terminal adaptation. Learn by the way
vw adaptation mainly depends on the plug-in postcss px to viewport, which automatically converts px into vw units according to the screen width to achieve the purpose of adaptation
At present, my configuration is as follows, and the pro test can run normally
1. Download relevant plug-ins first (pay attention to version matching. I try out the final matching version one by one)

npm i postcss-px-to-viewport postcss-aspect-ratio-mini postcss-write-svg postcss-cssnext postcss-viewport-units cssnano  --save

What plug-ins are still missing? They are different according to your Vue cli version. At that time, download them by yourself according to the runtime error prompt. That's basically all.
As for the role of each plug-in, you can baidu by yourself, so you can understand it in more detail

Then run the following code

 npm i cssnano-preset-advanced --save-dev

Otherwise, an error will be reported.

2. Create a new postcss. Directory under the root directory config. JS file and configure it as follows:

module.exports = {
	"plugins": {
      "postcss-import": {},
      "postcss-url": {},
      "postcss-aspect-ratio-mini": {},
      "postcss-write-svg": {
        utf8: false
      },
      "postcss-cssnext": {},
      "postcss-px-to-viewport": {
        viewportWidth: 750px,     // (Number) The width of the viewport.
        viewportHeight: 1334px,    // (Number) The height of the viewport.
        unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
        viewportUnit: 'vw',     // (String) Expected units.
        selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
        minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
        mediaQuery: false,   // (Boolean) Allow px to be converted in media queries.
        // exclude: [/node_modules/]
      },
      "postcss-viewport-units":{},
      "cssnano": {
        "cssnano-preset-advanced": {
          zindex: false,
          autoprefixer: false
        }
      }
    }
}

vw adaptation is not compatible with all browsers. We can use viewport units buggyfill to solve the compatibility problem as follows
In index Introducing cdn links into HTML

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

Create a new script tag after the body and add the following code
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
});
}
So you can use vw layout happily

3. Configure vant
1，npm i vant --save
2. On demand introduction
It can be imported directly according to the vant document on demand
There may also be situations where the style is invalid. If nothing can take effect, take a look at Vue config. JS, if the value of requiremeduleextension is set to false, the style of the third-party component library will not take effect, Vue config. JS is set as follows:

   css: {
    extract: true, // Whether to use the css separation plug-in ExtractTextPlugin
    sourceMap: false, // Open CSS source maps?
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
          modifyVars: {
            /* less Variable overrides for custom themes */
            'primary-color': '#1890FF',
            'link-color': '#1890FF',
            'border-radius-base': '4px'
          }
        }
      }
    },
    requireModuleExtension: true // Enable CSS modules for all CSS / pre processor files
  },

Then change postcss config. JS file is configured as follows

const path = require('path');
module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
  const designHeight = file.dirname.includes(path.join('node_modules', 'vant')) ? 667 : 1334;
  return {
    "plugins": {
      "postcss-import": {},
      "postcss-url": {},
      "postcss-aspect-ratio-mini": {},
      "postcss-write-svg": {
        utf8: false
      },
      "postcss-cssnext": {},
      "postcss-px-to-viewport": {
        viewportWidth: designWidth,     // (Number) The width of the viewport.
        viewportHeight: designHeight,    // (Number) The height of the viewport.
        unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
        viewportUnit: 'vw',     // (String) Expected units.
        selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
        minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
        mediaQuery: false,   // (Boolean) Allow px to be converted in media queries.
        // exclude: [/node_modules/]
      },
      "postcss-viewport-units":{},
      "cssnano": {
        "cssnano-preset-advanced": {
          zindex: false,
          autoprefixer: false
        }
      }
    }
  }
}
because vant The team is based on 375 px The ideal viewport width is 375 px，Generally, our design is 750 wide px，If you don't want to adapt vant And change the design draft to 375 px , you can use the above method.
.postcss.config.js File, in addition to exposing an object, it can also expose a function, no matter what is exposed webpack When running, it will be read and executed by the massive files configured by us.
When exposing functions, there is a benefit that you can get webpack The information of the current execution file, you can set the width of the viewport differently.

Note: before using a framework, you'd better spend time reading the documents. If you don't have time, you should also first look at the quick start and development guide. You will find a lot of colored eggs. This is not a waste of time, but to make you step on a lot of holes less. The above is not only my personal experience. I stepped on many pits, but also learned from many great God articles on the Internet. Finally, it ran normally. I specially recorded it, hoping to help you!
If you have any questions, you can confide in me Oh, know everything!
So far, we can happily develop the mobile terminal!