vue3.0 Adaptive Operation of Computers with Different Resolutions

First, we need to install 1 dependencies

npm i lib-flexible-computer -S // The root node will change according to the change of the page viewport font-size Size 
npm i px2rem-loader -D// Automatically set px Convert to rem
npm i postcss-px2rem// Put the code in px Automatically converts to the corresponding rem Adj. 1 Plug-ins 

What I want to talk to you about here is the dependence of lib-flexible-computer, which is installed in npm. Presumably, everyone searched for many methods for the adaptation of pc. Most of them installed the following dependence

npm i lib-flexible -S

Installation of this dependency, do adaptation can only be done under the screen 5401, pc terminal use is not very good, so it is replaced by the dependency written above
Don't talk too much nonsense
Let's get down to business
How to use dependencies after installation

Introduced in main. js

import "lib-flexible-computer";

Then create an vue. config. js file under src sibling
And add the following code to this file

module.exports = {
 publicPath: "./",
 outputDir: "dist",
 lintOnSave: true,
 css: {
  loaderOptions: {
   css: {},
   postcss: {
    plugins: [
     require("postcss-px2rem")({
      remUnit: 192/// Width of design drawing /10
     })
    ]
   }
  }
 }
};

In this way, the code generated by computers with different resolutions will be automatically converted into rem
Note: **

The size of the design drawing has been set above. After these operations are finished, you can write as big as the design drawing, and it can be automatically converted

**