Detailed description of vue-cli-based mobile terminal self-adaptation and vue-cli self-adaptation

Detailed description of vue-cli-based mobile terminal self-adaptation and vue-cli self-adaptation

I have written an article about mobile terminal screen adaptation: mobile terminal screen adaptation solution. Today I want to talk about mobile terminal screen adaptation based on vue-cli configuration.

The formula is still the same: the lib-flexible + rem of shoutao

Configure flexible

Install lib-flexible

Run the following installation command in the command line:

npm i lib-flexible --save

Introduce lib-flexible

Introduce lib-flexible in main. js of the project entry file

// main.jsimport 'lib-flexible'

Add meta tag

Add the following meta to index.html of the project root directory:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Px to rem

In actual development, the unit of value obtained through the design draft is px, so convert px to rem and write it into the style.

Converting px to rem we will use the px2rem tool which has the loader: px2rem-loader of webpack

Install px2rem-loader

Run the following installation command in the command line:

npm i px2rem-loade --save-dev

Configure px2rem-loade

In the webpack configuration generated by vue-cli, the options of vue-loader and the loader of other style files are ultimately generated by a method in build/utils. js.

We only need to add a px2remLoader after cssLoader, The remUnit option of the px2rem-loader means 1rem = How many pixels, combined with the lib-flexible solution, we will px2remLoader options. remUnit is set to 1/10 of the design draft width. Here we assume that the design draft width is PX.

// utils.jsvar cssLoader = { loader: 'css-loader', options: {  minimize: process.env.NODE_ENV === 'production',  sourceMap: options.sourceMap }}var px2remLoader = { loader: 'px2rem-loader', options: {  remUnit: 75 }}// ...

And put it into the loaders array.

// utils.jsfunction generateLoaders(loader, loaderOptions) { var loaders = [cssLoader, px2remLoader] // ...

After modifying the configuration, We need to restart it. Then, we can write px directly in the component, and the design draft can be written as much as possible, which is more comfortable.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.