Comment utiliser 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 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. peut 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 (plus utilisée)

Le première méthode : utilisez l'outil de thème en ligne de commande

Utilisez vue-cli pour installer le projet et introduisez 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 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 Couleur (comme : violet)

$--color-primary: purple;

4. Compilez le thème

Après avoir modifié les variables, compilez 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. Présentation d'un thème personnalisé

La dernière étape consiste à compiler Importer 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 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 la variable de style de l'élément directement 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

2. Installez elementUI et sass-loader, node-sass ( utilisez scss pour écrire des plug-ins dépendants dans le projet)

cd vue-project
npm i
npm run dev

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

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

/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
@import "../node_modules/element-ui/packages/theme-chalk/src/index";

a été remplacée par notre couleur personnalisée. autres modifications dans le fichier element-variable.scss. Utilisez simplement des variables

import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'
Vue.use(Element)

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

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

Articles connexes :

Comment utiliser ngrok+express pour résoudre les problèmes de débogage de l'interface WeChat

Comment utiliser vue-cli pour écrire plug-ins vue

Utilisation de vuex sous vue-cli (tutoriel détaillé)

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!