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 theme

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

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

3. 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!