Comment vue.js peut-il utiliser moins-Voir.js-php.cn

Comment vue.js peut-il utiliser moins

coldplay.xixi

Libérer： 2020-11-30 16:56:06

original

1806 Les gens l'ont consulté

vue.js peut utiliser less méthodes : 1. En less, on est autorisé à définir sous forme de variables la méthode de définition [@k:v;] et la méthode d'utilisation [@k]; . Variables d'épissure de chaîne.

Comment vue.js peut-il utiliser moins

L'environnement d'exploitation de ce tutoriel : système windows10, vue2.5.2, cet article est applicable à toutes les marques d'ordinateurs.

[Articles connexes recommandés : vue.js]

vue.js peut utiliser moins de méthode :

Téléchargement de la dépendance

1. Utilisez d'abord npm pour télécharger la dépendance

npm install --save less less-loader

Copier après la connexion

2. Une fois l'installation terminée, vérifiez si l'installation est réussie ;

3. Si après une installation réussie, la version installée avec succès sera affichée

Comment vue.js peut-il utiliser moins

Méthode de référence

1. main.js

lessc -v

Copier après la connexion

2. Créez ensuite un fichier .vue et commençons à jouer

Remarque : les fichiers de vue indépendants doivent être importés moins

<style></style>

Commencez à utiliser

1. Utilisation de variables en moins

En moins, on est autorisé à définir sous forme de variables, méthode de définition : @k :v; méthode d'utilisation : @ k;

import less from &#39;less&#39;
Vue.use(less)

Copier après la connexion

À ce moment, il y aura un carré d'une largeur de 100px, une hauteur de 100px et un fond rouge affiché sur la page;

Comment vue.js peut-il utiliser moins

2. String Comment utiliser les variables d'épissage ;

<div></div>
 
<style>
@color:red;
@k:100px;
.box{
width:@k;
height:@k;
background: @color;
}
</style>

Copier après la connexion

Remarque : le chemin doit être enveloppé par "", @{img} ne prendra effet que si des variables sont introduites. ;

Comment vue.js peut-il utiliser moins

3. Imbrication multicouche + calcul de variables

<div></div>
 
<style scoped>
@img:&#39;./img/&#39;;
@k:100px;
.box1{
    width:@k;
    height:@k;
    background:url("@{img}1.png")
}
</style>

Copier après la connexion

Vous pouvez voir que moins peut être utilisé dans l'imbrication, nous permettant de voir le CSS ; structure clairement à la fois ; en plus de l'imbrication, avez-vous constaté que son calcul est Où est la vraie force ?

Comment vue.js peut-il utiliser moins

4. Mixte = fonction

<div>
    <div>
        <div></div>
    </div>
</div>
 
<style>
@k:100px;
 .box1{
     width: @k;
     height:@k;
     background: red;
     .box2{
         width: @k/2;
         height:@k/2;
         background: green;
         .box3{
             width: @k/3;
             height:@k/3;
             background: blue;
         }
     }
 }
</style>

Copier après la connexion

Comment vue.js peut-il utiliser moins