Utiliser moins dans les composants vue

Cette fois, je vais vous présenter l'utilisation des composants less in vue. Quelles sont les précautions à prendre pour utiliser les composants less in vue ?

Tout d'abord, laissez-moi vous expliquer que si le projet est créé en utilisant le nom du projet npm init webpack , il n'est pas nécessaire de configurer manuellement le webpack

Donc utiliser less dans Vue est très simple, il vous suffit d'installer less, less-loader fera

Étapes

npm install less less-loader --save //将less和less-loader安装到开发依赖
npm run dev

Si l'installation réussit, vous pouvez utiliser less dans le composant vue

<style lang="less" scoped>
 .hello{
  a{
   color:red;
  }
 }

Supplément :

Comment utiliser moins dans vue

http://element.eleme.io/ //

elementUI est basé sur vue2

Utiliser less dans vue

Tout d'abord, l'environnement de développement vue a été installé avec succès

Quand tout est prêt :

Première étape :

Installez moins de dépendances, npm install less less-loader --save

Étape 2 :

Modifiez le fichier webpack.config.js, configurez le chargeur pour charger les dépendances, afin qu'il prenne en charge external less, ajoutez

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},

Maintenant, l'installation est pratiquement terminée. Ensuite, lorsque vous l'utilisez, ajoutez lang="less" dans la balise de style pour écrire moins de code (ajoutez scoped à la balise de style. pour fonctionner uniquement ici) Le domaine est valide)

（或者
@import './index.less'; //引入全局less文件
）。
(
html中直接引入：
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less" rel="external nofollow" >
<script src="文件路径/less.js" type="text/javascript"></script>
)

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Comment envoyer une requête POST en utilisant le format JSON

Comment personnaliser le code du formulaire de connexion avec Vue.js

Composants dynamiques personnalisés de la bibliothèque de composants d'interface utilisateur de Vue

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!