Maison > Article > interface Web > Utilisez elementUI pour implémenter des méthodes de thème personnalisées dans Vue
Ci-dessous, je partagerai avec vous un article sur l'implémentation elementUI de Vue des méthodes de thème personnalisées. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.
Utilisez vue pour développer des projets et elementUI Selon la méthode d'écriture du site officiel, nous pouvons personnaliser le thème pour l'adapter aux exigences de notre projet. Voici les étapes spécifiques pour mettre en œuvre les deux méthodes. se référer à la documentation officielle. Définir le document officiel du thème), permettez-moi d'abord de dire que le projet n'utilise pas scss pour écrire, utilisez la méthode de l'outil de thème (utilisée davantage)
Le premier méthode : utilisez l'outil de thème en ligne de commande
Utilisez vue-cli pour installer le projet et introduire element-ui (pour plus de détails, veuillez vous référer à l'introduction de la deuxième méthode)
1. Outils d'installation
1. Installez l'outil de thème
npm i element-theme -g
2. Installez le thème de la craie. depuis npm ou extrayez le dernier code de GitHub
# 从 npm npm i element-theme-chalk -D # 从 GitHub npm i https://github.com/ElementUI/theme-chalk -D
2. Initialisez le fichier de variable
et -i [可以自定义变量文件,默认为element-variables.scss] > ✔ Generator variables file
À ce moment, element-variables.scss (ou un fichier personnalisé) sera généré dans le Répertoire racine, à peu près comme suit :
$--color-primary: #409EFF !default; $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */ $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */ $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */ $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */ $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ $--color-success: #67c23a !default; $--color-warning: #eb9e05 !default; $--color-danger: #fa5555 !default; $--color-info: #878d99 !default; ...
3. > Modifiez directement le fichier element-variables.scss, par exemple, modifiez la couleur du thème selon vos besoins (comme : violet)
$--color-primary: purple;4. le thème
Après avoir modifié les variables, compiler le thème (si Après compilation, les variables sont à nouveau modifiées et doivent être recompilées)
et > ✔ build theme font > ✔ build element theme5. Introduction d'un thème personnalisé
La dernière étape consiste à compiler Introduire un bon fichier de thème dans le projet (le fichier compilé se trouve sous le fichier de thème dans le répertoire racine par défaut , vous pouvez également spécifier le répertoire d'emballage via le paramètre -o), introduire
dans le fichier d'entrée main.js et l'ajouter au projet. Écrivez quelques styles et voyez si la couleur du thème change : (la couleur du thème passe au violet)
import '../theme/index.css' import ElementUI from 'element-ui' import Vue from 'vue' Vue.use(ElementUI)
<p> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </p>Deuxième méthode : Modifier directement la variable de style de l'élément
Modifier directement la variable de style de l'élément dans le projet (à condition que votre document soit également écrit en scss)
1. Installez d'abord un nouveau projet avec vue-cli :1, installez vue :
2, installez vue-cli dans le répertoire du projet :
npm i -g vue
3, basé sur Webpack crée un nouveau projet (vue-project)
npm i -g vue-cli
4. Entrez les lignes de commande suivantes dans l'ordre et exécutez vue-project
vue init webpack vue-project
cd vue-project npm i npm run dev2. Installez elementUI et sass-loader, node-sass (utilisez scss pour écrire des plug-ins dépendants dans le projet)
1, installez element-ui
2, installez sass-loader, node-sass
npm i element-ui -S
Laissez-moi parler ici, il n'est pas nécessaire de configurer le fichier webpack.base.conf.js, vue-loader configurera le chargeur correspondant en fonction des différents types de fichiers pour packager nos fichiers de style (Si vous êtes intéressé, vous pouvez jeter un œil au code principal de vue-loader)
npm i sass-loader node-sass -D3. Changer la variable de style d'élément
1. Créez l'élément sous le fichier src -variables.scss (le nom peut être personnalisé), écrivez le code suivant :
2. Introduisez le fichier ci-dessus dans le fichier d'entrée main.js
/* 改变主题色变量 */ $--color-primary: teal; /* 改变 icon 字体路径变量,必需 */ $--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts'; @import "../node_modules/element-ui/packages/theme-chalk/src/index";
Jetons un coup d'œil à l'effet. Introduisons quelques styles dans le fichier et jetons un œil par exemple, la couleur par défaut du bouton
import Vue from 'vue' import Element from 'element-ui' import './element-variables.scss' Vue.use(Element)
a été remplacée par notre couleur personnalisée. changements dans le fichier element-variable.scss. Utilisez simplement des variables
<p> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </p>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 :
En créant des balises dans js Dynamics et en définissant des méthodes d'attribut (tutoriel détaillé)
Réalisé dans jQuery Méthodes d'ajout et attribuer des sous-éléments de balise
Comment modifier la valeur du texte de la balise P dans jQuery
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!