Heim > Artikel > Web-Frontend > 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!