Verwenden Sie elementUI, um benutzerdefinierte Designmethoden in Vue zu implementieren

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: '../node_modules/element-ui/lib/theme-chalk/fonts';
@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!