Heim Web-Frontend js-Tutorial Verwenden Sie elementUI, um benutzerdefinierte Designmethoden in Vue zu implementieren

Verwenden Sie elementUI, um benutzerdefinierte Designmethoden in Vue zu implementieren

Jun 05, 2018 am 09:27 AM
elementui Thema Anpassen

Im Folgenden werde ich einen Artikel über die elementUI-Implementierung benutzerdefinierter Designmethoden mit Ihnen teilen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Verwenden Sie Vue zum Entwickeln von Projekten und elementUI. Hier sind die spezifischen Schritte zur Implementierung der beiden Methoden (Siehe die offizielle Dokumentation.) Lassen Sie mich zunächst sagen, dass das Projekt kein SCSS zum Schreiben verwendet, sondern die Theme-Tool-Methode (mehr verwendet)

Das erste Methode: Verwenden Sie 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. Installationstools

1. Installieren Sie das Chalk-Theme npm oder ziehen Sie den neuesten Code von GitHub

npm i element-theme -g

2. Initialisieren Sie die Variablendatei

# 从 npm
npm i element-theme-chalk -D
# 从 GitHub
npm i https://github.com/ElementUI/theme-chalk -D
Zu diesem Zeitpunkt element-variables.scss ( oder eine benutzerdefinierte Datei) wird im Stammverzeichnis generiert, ungefähr wie folgt:

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

3 Variablen ändern Bearbeiten Sie das Element direkt -variables.scss-Datei, ändern Sie beispielsweise die Designfarbe in die gewünschte Farbe (z. B. Lila).

$--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;
...

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

$--color-primary: purple;

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 ist standardmäßig In der Theme-Datei im Stammverzeichnis können Sie auch das Verpackungsverzeichnis über angeben den Parameter -o), führen Sie

et
> ✔ build theme font
> ✔ build element theme

in die Eintragsdatei main.js ein, schreiben Sie einige Stile in das Projekt und prüfen Sie, ob sich die Designfarbe ändert: (Theme Die Farbe ändert sich in Lila)

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

Zweite Methode: Ändern Sie direkt die Elementstilvariable Ändern Sie direkt die Stilvariable des Elements im Projekt (Voraussetzung ist, dass Ihr Dokument auch mit geschrieben wurde). scss)

1. Installieren Sie zunächst ein neues Projekt mit vue-cli: 1. Installieren Sie vue:

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

2. Installieren Sie vue-cli im Projektverzeichnis:

npm i -g vue

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

npm i -g vue-cli

4. Führen Sie vue-project aus

vue init webpack vue-project

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

cd vue-project
npm i
npm run dev

2, sass-loader, node-sass installieren

npm i element-ui -S

Lassen Sie mich Ihnen hier sagen, dass keine Notwendigkeit besteht, webpack.base zu konfigurieren. conf.js-Datei konfiguriert Vue-Loader den entsprechenden Loader entsprechend den verschiedenen Dateitypen, um unsere Stildateien zu packen (bei Interesse können Sie sich den Kerncode von Vue-Loader ansehen)

3. Ändert die Elementstilvariable 1. Erstellen Sie die Datei element-variables.scss unter src (der Name kann angepasst werden) und schreiben Sie den folgenden Code:

npm i sass-loader node-sass -D

2. Am Eingang importieren Sie die obige Datei in die Datei main.js

Fügen Sie einige Stile in die Datei ein, um sie zu sehen, z. B. button

/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量,必需 */
$--font-path: &#39;../node_modules/element-ui/lib/theme-chalk/fonts&#39;;
@import "../node_modules/element-ui/packages/theme-chalk/src/index";
Die Standardfarbe wurde in unsere benutzerdefinierte Farbe geändert. Ja, wenn es weitere Änderungen gibt, ändern Sie einfach die Variablen in der Datei element-variable.scss

Das Obige ist das, was ich für alle zusammengestellt habe wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

Durch das Erstellen von Tags in js-Dynamik und das Festlegen von Attributmethoden (ausführliches Tutorial)

Erreicht in jQuery Methoden zum Hinzufügen und Zuweisen von Tag-Unterelementen

So ändern Sie den P-Tag-Textwert in jQuery

Das obige ist der detaillierte Inhalt vonVerwenden Sie elementUI, um benutzerdefinierte Designmethoden in Vue zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

PHP-Tutorial
1510
276
Wo befinden sich Themes in Windows 11? Wo befinden sich Themes in Windows 11? Aug 01, 2023 am 09:29 AM

Windows 11 bietet so viele Anpassungsoptionen, darunter eine Reihe von Themen und Hintergrundbildern. Obwohl diese Themen auf ihre Art ästhetisch sind, fragen sich einige Benutzer immer noch, wo sie unter Windows 11 im Hintergrund stehen. Diese Anleitung zeigt Ihnen die verschiedenen Möglichkeiten, auf den Speicherort Ihres Windows 11-Designs zuzugreifen. Was ist das Standarddesign von Windows 11? Der Standard-Designhintergrund von Windows 11 ist eine blühende abstrakte königsblaue Blume mit einem himmelblauen Hintergrund. Dieser Hintergrund ist aufgrund der Vorfreude auf die Veröffentlichung des Betriebssystems einer der beliebtesten. Das Betriebssystem bringt jedoch auch eine Reihe anderer Hintergründe mit. Daher können Sie den Hintergrund des Windows 11-Desktopdesigns jederzeit ändern. Themen werden in Windo gespeichert

So heben Sie die Anwendung eines Designs in Windows 11 auf (ändern oder entfernen). So heben Sie die Anwendung eines Designs in Windows 11 auf (ändern oder entfernen). Sep 30, 2023 pm 03:53 PM

Designs spielen eine wichtige Rolle für Benutzer, die ihr Windows-Erlebnis ändern möchten. Es kann den Desktop-Hintergrund, Animationen, Sperrbildschirm, Mauszeiger, Töne, Symbole usw. ändern. Was aber, wenn Sie Designs in Windows 11 entfernen möchten? Es ist ebenso einfach und es stehen Optionen zur Verfügung, sowohl für das aktuelle Benutzerprofil als auch für das gesamte System, also alle Benutzer. Darüber hinaus können Sie in Windows 11 sogar benutzerdefinierte Designs löschen, wenn diese nicht mehr für diesen Zweck verwendet werden. Wie finde ich mein aktuelles Thema? Drücken Sie +, um die Einstellungen-App zu öffnen. Gehen Sie im Navigationsbereich zu Personalisierung. Klicken Sie auf Themen. Das aktuelle Thema wird rechts aufgelistet. Wie wäre es mit WindowsI?

So richten Sie schnell einen benutzerdefinierten Avatar in Netflix ein So richten Sie schnell einen benutzerdefinierten Avatar in Netflix ein Feb 19, 2024 pm 06:33 PM

Ein Avatar auf Netflix ist eine visuelle Darstellung Ihrer Streaming-Identität. Benutzer können über den Standard-Avatar hinausgehen, um ihre Persönlichkeit auszudrücken. Lesen Sie diesen Artikel weiter, um zu erfahren, wie Sie in der Netflix-App ein benutzerdefiniertes Profilbild festlegen. So legen Sie schnell einen benutzerdefinierten Avatar in Netflix fest. In Netflix gibt es keine integrierte Funktion zum Festlegen eines Profilbilds. Sie können dies jedoch tun, indem Sie die Netflix-Erweiterung in Ihrem Browser installieren. Installieren Sie zunächst ein benutzerdefiniertes Profilbild für die Netflix-Erweiterung in Ihrem Browser. Sie können es im Chrome Store kaufen. Öffnen Sie nach der Installation der Erweiterung Netflix in Ihrem Browser und melden Sie sich bei Ihrem Konto an. Navigieren Sie zu Ihrem Profil in der oberen rechten Ecke und klicken Sie

So geben Sie den Speicherort des Win10-Designordners an So geben Sie den Speicherort des Win10-Designordners an Dec 27, 2023 pm 09:37 PM

In letzter Zeit haben viele Freunde das Gefühl, dass das Theme von Win10 nicht zu ihrer Ästhetik passt und möchten das Theme ändern. Nachdem sie es online heruntergeladen haben, stellen sie fest, dass der Ordner nicht gefunden werden kann. Dann zeigt Ihnen der Editor, wie Sie den Ordner von Win10 finden Thema. In welchem ​​Ordner befindet sich das Win10-Design? 1. Der Standardspeicherpfad für Win10-Systemhintergründe: 1. Microsoft speichert diese Bilder im Pfad C:\Windows\Web\Wallpaper. Darunter befinden sich die Standardspeicherorte für Bilder mit drei verschiedenen Designs . Ort, 2, Blumen- und Linien- und Farben-Themenbilder werden ebenfalls im gleichnamigen Ordner gespeichert! Das Benennungsprinzip ist imgXXX. Wir müssen diesem Prinzip nur folgen, um den Namen des zugehörigen Bildes, das wir festlegen möchten, zu ändern und das Bild einzufügen

Wie erstelle und passe ich Venn-Diagramme in Python an? Wie erstelle und passe ich Venn-Diagramme in Python an? Sep 14, 2023 pm 02:37 PM

Ein Venn-Diagramm ist ein Diagramm zur Darstellung von Beziehungen zwischen Mengen. Um ein Venn-Diagramm zu erstellen, verwenden wir Matplotlib. Matplotlib ist eine häufig verwendete Datenvisualisierungsbibliothek in Python zum Erstellen interaktiver Diagramme und Grafiken. Es wird auch zum Erstellen interaktiver Bilder und Diagramme verwendet. Matplotlib bietet viele Funktionen zum Anpassen von Diagrammen und Grafiken. In diesem Tutorial veranschaulichen wir drei Beispiele zum Anpassen von Venn-Diagrammen. Die chinesische Übersetzung von Beispiel lautet: Beispiel Dies ist ein einfaches Beispiel für die Erstellung der Schnittmenge zweier Venn-Diagramme. Zuerst haben wir die erforderlichen Bibliotheken importiert und Venns importiert. Dann erstellen wir den Datensatz als Python-Set und verwenden anschließend die Funktion „venn2()“ zum Erstellen

So passen Sie das Hintergrundbild in Win11 an So passen Sie das Hintergrundbild in Win11 an Jun 30, 2023 pm 08:45 PM

Wie kann ich das Hintergrundbild in Win11 anpassen? Im neu veröffentlichten Win11-System gibt es viele benutzerdefinierte Funktionen, aber viele Freunde wissen nicht, wie sie diese Funktionen verwenden sollen. Einige Freunde denken, dass das Hintergrundbild relativ eintönig ist und möchten das Hintergrundbild anpassen, wissen aber nicht, wie man das Hintergrundbild anpasst. Wenn Sie nicht wissen, wie Sie das Hintergrundbild definieren, hat der Editor die Schritte dazu zusammengestellt Passen Sie das Hintergrundbild in Win11 unten an. Wenn Sie interessiert sind, schauen Sie sich unten um. Schritte zum Anpassen von Hintergrundbildern in Win11: 1. Klicken Sie auf dem Desktop auf die Schaltfläche „Win“ und dann im Popup-Menü auf „Einstellungen“, wie in der Abbildung dargestellt. 2. Rufen Sie das Einstellungsmenü auf und klicken Sie auf Personalisierung, wie in der Abbildung gezeigt. 3. Geben Sie „Personalisierung“ ein und klicken Sie auf „Hintergrund“, wie im Bild gezeigt. 4. Geben Sie die Hintergrundeinstellungen ein und klicken Sie, um Bilder zu durchsuchen

So aktivieren und passen Sie Überblendungen in Apple Music auf dem iPhone mit iOS 17 an So aktivieren und passen Sie Überblendungen in Apple Music auf dem iPhone mit iOS 17 an Jun 28, 2023 pm 12:14 PM

Das iOS 17-Update für das iPhone bringt einige große Änderungen für Apple Music. Dazu gehört die Zusammenarbeit mit anderen Benutzern an Playlists, das Starten der Musikwiedergabe von verschiedenen Geräten bei Verwendung von CarPlay und mehr. Eine dieser neuen Funktionen ist die Möglichkeit, Überblendungen in Apple Music zu verwenden. Dadurch können Sie nahtlos zwischen den Titeln wechseln, was beim Anhören mehrerer Titel eine tolle Funktion ist. Crossfading trägt dazu bei, das Hörerlebnis insgesamt zu verbessern und stellt sicher, dass Sie nicht erschrecken oder aus dem Hörerlebnis aussteigen, wenn der Titel wechselt. Wenn Sie diese neue Funktion optimal nutzen möchten, erfahren Sie hier, wie Sie sie auf Ihrem iPhone verwenden. So aktivieren und passen Sie Crossfade für Apple Music an. Sie benötigen die neueste Version

So passen Sie die Tastenkombinationseinstellungen in Eclipse an So passen Sie die Tastenkombinationseinstellungen in Eclipse an Jan 28, 2024 am 10:01 AM

Wie kann ich die Tastenkombinationseinstellungen in Eclipse anpassen? Als Entwickler ist die Beherrschung von Tastenkombinationen einer der Schlüssel zur Effizienzsteigerung beim Codieren in Eclipse. Als leistungsstarke integrierte Entwicklungsumgebung bietet Eclipse nicht nur viele Standard-Tastenkombinationen, sondern ermöglicht Benutzern auch, diese nach ihren eigenen Vorlieben anzupassen. In diesem Artikel wird erläutert, wie Sie die Tastenkombinationseinstellungen in Eclipse anpassen, und es werden spezifische Codebeispiele gegeben. Öffnen Sie Eclipse. Öffnen Sie zunächst Eclipse und geben Sie ein

See all articles