How to configure mobile adaptation using vue-cli?

This article mainly introduces the detailed explanation of configuring mobile screen adaptation based on vue-cli. Now I will share it with you and give you a reference.

I have written an article before about mobile screen adaptation: mobile To solve the problem of terminal screen adaptation, today let’s talk about the problem of mobile terminal screen adaptation based on vue-cli configuration.

The recipe is still the same: lib-flexible rem from Taobao

Configure flexible

Install lib-flexible

Run the following installation in the command line:

npm i lib-flexible --save

Introduce lib-flexible

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

// main.js
import 'lib-flexible'

Add meta tag

Add the following meta

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

px to rem

# in index.html in the project root directory ##In actual development, the value unit we get through the design draft is px, so we need to convert px into rem and then write it into the style.

Convert px to rem We will use the tool px2rem, which has a webpack loader: px2rem-loader

Install px2rem-loader

In Run the following installation in the command line:

npm i px2rem-loade --save-dev

Configure px2rem-loade

In the webpack configuration generated by vue-cli, vue-loader options and other style file loaders In the end, they are all generated by a method in build/utils.js.

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

// utils.js
var 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.js
function generateLoaders(loader, loaderOptions) {
 var loaders = [cssLoader, px2remLoader]
 // ...

After modifying the configuration, you need to restart. Then we write the unit directly in the component and write px. You can write as much as the design draft is, which is much more comfortable. .

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement watch to automatically detect data changes in vue

How to package using Parcel

Detailed explanation of how Vue configures the packaging tool

Detailed answer: What impact do changes in vue have on components?

How to implement a lottery system using JavaScript

The above is the detailed content of How to configure mobile adaptation using vue-cli?. For more information, please follow other related articles on the PHP Chinese website!