Comment configurer l'adaptation mobile à l'aide de vue-cli ?

Cet article présente principalement l'explication détaillée de la configuration de l'adaptation d'écran mobile basée sur vue-cli. Maintenant, je le partage avec vous et vous donne une référence

J'ai déjà écrit un article sur l'adaptation d'écran mobile : Mobile. Pour résoudre le problème de l'adaptation de l'écran du terminal, parlons aujourd'hui du problème de l'adaptation de l'écran du terminal mobile basé sur la configuration vue-cli.

La recette est toujours la même : lib-flexible + rem de Taobao

Configurer flexible

Installer lib-flexible

Exécutez l'installation suivante dans la ligne de commande :

npm i lib-flexible --save

Introduisez lib-flexible

Introduisez lib-flexible dans le fichier d'entrée du projet main .js

// main.js
import 'lib-flexible'

Ajouter une balise méta

Ajoutez la balise méta suivante dans index.html dans le répertoire racine du projet

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

px en rem

Dans le développement réel, l'unité de valeur que nous obtenons via le brouillon de conception est px, nous devons donc convertir px en rem, puis l'écrire dans le style.

Convertir px en rem Nous utiliserons l'outil px2rem, qui a un chargeur webpack : px2rem-loader

Installer px2rem-loader

Dans Exécutez le installation suivante en ligne de commande :

npm i px2rem-loade --save-dev

Configurer px2rem-loade

Dans la configuration du webpack générée par vue-cli, les options de vue-loader et autres styles le chargeur de fichiers est finalement généré par une méthode dans build/utils.js.

Il suffit d'ajouter un px2remLoader après cssLoader. L'option remUnit de px2rem-loader signifie 1rem = combien de pixels. Combinée avec la solution lib-flexible, nous définissons les options.remUnit de px2remLoader sur le design 1. /10 de la largeur du brouillon. Ici, nous supposons que la largeur du brouillon de conception est de 750 px.

// 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
 }
}
// ...

et mettez-le dans le tableau des chargeurs

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

Après avoir modifié la configuration, vous devez redémarrer Ensuite, nous écrivons l'unité dans le composant et écrivons directement px. écrire autant que le brouillon de conception, beaucoup plus confortable.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment implémenter watch pour détecter automatiquement les changements de données dans vue

Comment empaqueter à l'aide de Parcel

Explication détaillée de la façon dont Vue configure les outils d'empaquetage

Explication détaillée de l'impact des changements dans Vue sur les composants ?

Comment mettre en œuvre un système de loterie en utilisant JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!