Die elementUI von Vue implementiert benutzerdefinierte Designs

Verwenden Sie Vue, um Projekte zu entwickeln und elementUI zu verwenden. Hier sind die spezifischen Schritte zur Implementierung der beiden Methoden (das offizielle Dokument zum Anpassen des Themas (offizielles Dokument)) Lassen Sie mich zunächst sagen, dass das Projekt kein SCSS zum Schreiben verwendet und die Theme-Tool-Methode (häufiger verwendet) verwendet.

Die erste Methode: verwenden Das Befehlszeilen-Theme-Tool

verwenden Sie vue -cli, um das Projekt zu installieren und element-ui einzuführen (Einzelheiten finden Sie in der Einführung in der zweiten Methode)

1. Installieren Sie die Tools

1. Theme-Tools installieren

npm i element-theme -g

2. Installieren Sie das Chalk-Theme, Sie können es von npm installieren oder den neuesten Code von GitHub abrufen

# 从 npm
npm i element-theme-chalk -D
# 从 GitHub
npm i https://github.com/ElementUI/theme-chalk -D

2. Initialisieren Sie das Variablendatei

et -i [可以自定义变量文件，默认为element-variables.scss]
> ✔ Generator variables file

Zu diesem Zeitpunkt wird das Element im Stammverzeichnis -variables.scss (oder einer benutzerdefinierten Datei) generiert, ungefähr wie folgt:

$--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 Variablen ändern

Bearbeiten Sie die Datei element-variables.scss direkt, ändern Sie beispielsweise die Designfarbe in Ihre eigene Die erforderliche Farbe (z. B. Lila)

$--color-primary: purple;

4. Kompilieren Sie das Design

Nach dem Ändern der Variablen müssen Sie das Thema kompilieren (wenn die Variablen nach der Kompilierung erneut geändert werden, müssen Sie das Thema erneut kompilieren) Kompilieren)

et
> ✔ build theme font
> ✔ build element theme

5. Führen Sie a ein Benutzerdefiniertes Theme

Der letzte Schritt besteht darin, die kompilierte Theme-Datei in das Projekt einzuführen (die kompilierte Datei befindet sich standardmäßig unter der Theme-Datei im Stammverzeichnis, Sie können das Verpackungsverzeichnis auch über den Parameter -o angeben). , füge

import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)

in die Eintragsdatei main.js ein, schreibe einige Stile in das Projekt und schaue, ob sich die Themenfarbe ändert: (die Themenfarbe ändert sich in Lila)

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

Zweite Methode: Ändern Sie direkt die Stilvariable des Elements

Ändern Sie direkt die Stilvariable des Elements im Projekt (vorausgesetzt, Ihr Dokument wurde auch mit scss geschrieben)

1, installieren Sie zunächst ein neues Projekt mit vue-cli:

1, vue installieren:

npm i -g vue

2, vue-cli im Projektverzeichnis installieren:

npm i -g vue-cli

3. Erstellen Sie ein neues Projekt (vue-project) basierend auf Webpack

vue init webpack vue-project

4. Geben Sie nacheinander die folgenden Befehlszeilen ein und führen Sie vue-project aus

cd vue-project
npm i
npm run dev

2. Installieren Sie elementUI und sass-loader, node -sass (verwenden Sie scss im Projekt, um abhängige Plug-Ins zu schreiben)

1, element-ui installieren

npm i element-ui -S

2, sass-loader installieren, node-sass

npm i sass-loader node-sass -D

Lassen Sie mich hier sprechen. Es besteht keine Notwendigkeit, die Datei webpack.base.conf.js zu konfigurieren. Der Vue-Loader konfiguriert den entsprechenden Loader entsprechend den verschiedenen Dateitypen, um unsere Stildateien zu packen (falls Sie interessiert sind). , Sie können den Kerncode des Vue-Loaders sehen)

3. Ändern Sie die Elementstilvariablen

1. Erstellen Sie die Datei element-variables.scss unter src (der Name kann angepasst werden) und schreiben Sie Folgendes 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. Fügen Sie die obige Datei in die Eingabedatei main.js ein

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

Sehen wir uns den Effekt an, z. B. die Schaltfläche

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

Die Standardfarbe wurde in unsere benutzerdefinierte Farbe geändert. Für andere Änderungen ändern Sie einfach die Variable in der Datei element-variable.scss

Verwandte Empfehlungen:

Teilen Sie die Standardmethode zur Stiländerung von elementui

Vue 2.0 und elementUI implementieren den Methodencode der Breadcrumb-Navigationsleiste

Verwenden von vue+ elementUI Implementierungsmethoden teilweise eingeführter Komponenten

Das obige ist der detaillierte Inhalt vonDie elementUI von Vue implementiert benutzerdefinierte Designs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!