Maison >interface Web >js tutoriel >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!