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 theme

5. 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 vue

2, installez vue-cli dans le répertoire du projet :

npm i -g vue-cli

3. (vue-project) basé sur webpack

vue init webpack vue-project

4. Entrez les lignes de commande suivantes dans l'ordre et exécutez vue-project

cd vue-project
npm i
npm run dev

2. 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 -S

2, installez sass-loader, node-sass

npm i sass-loader node-sass -D

Laissez-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!