Maison > Article > interface Web > elementUI de Vue implémente des thèmes personnalisés
Utilisez vue pour développer des projets et utiliser 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 (vous pouvez vous référer à. le document officiel pour personnaliser le document officiel du thème), permettez-moi d'abord de dire que le projet n'utilise pas scss pour écrire, et utilise la méthode de l'outil de thème (plus couramment utilisée)
La première méthode : Utiliser l'outil de thème en ligne de commande
Utiliser vue -cli installe le projet et introduit element-ui (pour plus de détails, veuillez vous référer à l'introduction de la deuxième méthode)
1. Installer les outils
1. Installez les outils de thème
npm i element-theme -g
2. Installez le thème de la craie, vous pouvez l'installer depuis npm ou extraire 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 variables
et -i [可以自定义变量文件,默认为element-variables.scss] > ✔ Generator variables file
A ce moment, l'élément sera généré dans le répertoire racine -variables.scss (ou fichier personnalisé), à 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 la vôtre. La couleur requise (telle que : violet)
$--color-primary: purple;
Compilez le thème
4. 🎜>
Après avoir modifié les variables, vous devez compiler le thème (si les variables sont à nouveau modifiées après compilation, vous devez recompiler le thème) Compiler)et > ✔ build theme font > ✔ build element theme5. Introduire un thème personnalisé La dernière étape consiste à introduire le fichier de thème compilé 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'empaquetage via le paramètre -o) , introduisez
import '../theme/index.css' import ElementUI from 'element-ui' import Vue from 'vue' Vue.use(ElementUI)dans le fichier d'entrée main.js, écrivez quelques styles dans le projet, et voyez si la couleur du thème change : (la couleur du thème passe au violet)
<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 :
npm i -g vue2, installez vue-cli dans le répertoire du projet :
npm i -g vue-cli3. (vue-project) basé sur webpack
vue init webpack vue-project4. Entrez les lignes de commande suivantes dans l'ordre et exécutez vue-project
cd vue-project npm i npm run dev2. Installez elementUI et sass-loader, node -sass (utilisez scss dans le projet pour écrire des plug-ins dépendants) 1, installez element-ui
npm i element-ui -S2, installez sass-loader, node-sass
npm i sass-loader node-sass -DLaissez-moi vous 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 voir le code principal de vue-loader) 3. Changez les variables de style d'élément 1 Créez le fichier element-variables.scss sous src (le nom peut être personnalisé) et écrivez ce qui suit. code :
/* 改变主题色变量 */ $--color-primary: teal; /* 改变 icon 字体路径变量,必需 */ $--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts'; @import "../node_modules/element-ui/packages/theme-chalk/src/index";2. Importez le fichier ci-dessus dans le fichier d'entrée main.js
import Vue from 'vue' import Element from 'element-ui' import './element-variables.scss' Vue.use(Element)Introduisons quelques styles dans le fichier, tels que bouton
<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>
La couleur par défaut a été remplacée par notre couleur personnalisée. Pour d'autres modifications, modifiez simplement la variable dans le fichier element-variable.scss
Recommandations associées :
Partagez la méthode de modification de style par défaut d'elementui
Vue 2.0 et elementUI implémentent le code de la méthode de la barre de navigation du fil d'Ariane
Utilisation de vue+ elementUI Méthodes d'implémentation des composants partiellement introduits
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!