So verwenden Sie eine Elementkomponente auf der Vue-Seite (Schritte)

Vue ist ein beliebtes Front-End-Entwicklungsframework, das vom Element-Team eines bekannten inländischen Unternehmens erstellt wurde. Element ist eine Reihe von Desktop-Komponentenbibliotheken, die auf Vue 2.0 basieren. Es folgt den Designstandards von Material Design und bietet umfangreiche Komponentenstile Es bietet ein gutes Benutzerinteraktionserlebnis und eignet sich sehr gut zum Erstellen einer bequemeren und schöneren Benutzeroberfläche. Wie verwendet man also die Elementkomponente auf der Vue-Seite? Lassen Sie uns als nächstes gemeinsam lernen.

1. Element-Komponentenbibliothek installieren

Bevor wir Element verwenden, müssen wir es zunächst installieren. Geben Sie das Projektverzeichnis im Terminal ein und führen Sie den folgenden Befehl aus, um Element zu installieren:

npm i element-ui -S

Das -S bedeutet hier, dass wir Element als abhängige Umgebung des Projekts installieren. Wenn Sie Garn verwenden, sollte die Befehlszeile lauten:

yarn add element-ui

Installation abgeschlossen. Schließlich führen wir Element in main.js ein:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Die Vue.use-Methode wird hier verwendet, um das Element-Plug-In zu registrieren, damit wir die Element-Komponente im Vue-Projekt verwenden können.

2. Verwenden der Element-Komponente

Anschließend können wir auf unserer Vue-Seite die Element-Komponente vorstellen, um die verschiedenen von ihr bereitgestellten Komponenten zu verwenden. Wenn wir beispielsweise eine Schaltfläche verwenden müssen, können wir den folgenden Code direkt in den Code schreiben:

<template>
  <div>
    <el-button>按钮</el-button>
  </div>
</template>

Die El-Schaltfläche hier ist die im Element-Plug-In definierte Schaltflächenkomponente. Dabei können wir die benötigten Komponenten frei auswählen und in den Projektcode einfügen, um den interaktiven Effekt komplexer Seiten zu erzielen.

3. Angepasstes Design

Element bietet viele Grundkomponenten, aber wenn Sie im Projekt auf Situationen stoßen, die eine Anpassung von Farbe, Größe, Schriftart usw. erfordern, können Sie das Design auch ganz einfach anpassen. Das Anpassen von Themen kann auf zwei Arten unterteilt werden: Ändern von Parametern und Überschreiben von Stilen.

3.1 Parameter ändern

Definieren Sie Parameter separat im Projekt, die für globale Komponenten wirksam sind, einschließlich Elementkomponenten und benutzerdefinierten Komponenten.

$--color-primary: #1ED2EB;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;

@import './node_modules/element-ui/packages/theme-chalk/src/index';

3.2 Stil überschreiben

Überschreiben Sie den von $style generierten Stil, indem Sie den globalen Stil ändern.

Zuerst müssen wir das Element-Themenpaket über den folgenden Befehl lokal herunterladen:

npm i element-theme -S

Nachdem der Download abgeschlossen ist, können wir ein Element-Themenpaket auswählen, um mit der Kompilierung unseres eigenen Themas zu beginnen. Wir haben beispielsweise die Standardeinstellung ausgewählt Thema von Element.

Fügen Sie den folgenden Inhalt in main.js hinzu:

import ET from 'element-theme'

ET.theme('default', {
  // your styles here
})

Die Methode ET.theme wird zum Kompilieren und Ausgeben eines benutzerdefinierten Themas verwendet, wobei default den Namen des Themas darstellt, den wir ändern möchten. Sie können den Namen hier anpassen. Es ist wichtig zu beachten, dass Sie beim Schreiben von Themes mit ET.theme die Less-Syntax befolgen müssen.

Wenn Sie auf verschiedenen Seiten unterschiedliche benutzerdefinierte Designs verwenden möchten, können Sie eine Stildatei hinzufügen und für jede Seite ein separates Design definieren. Wenn wir beispielsweise ein rosafarbenes Thema in login.vue starten möchten, können wir den folgenden Code schreiben:

// login.vue
<style lang="scss">
  @import '/element-variables.scss';

  $--color-primary: #ff54a9;
  $--color-success: #67C23A;
  $--color-warning: #E6A23C;
  $--color-danger: #F56C6C;

  @import './node_modules/element-ui/packages/theme-chalk/src/index';
</style>

Das Obige ist der grundlegende Inhalt der Verwendung der Element-Komponente auf der Vue-Seite. Natürlich verfügt die Element-Komponentenbibliothek über viele andere Komponenten wie Tabellen, Paging, Nachrichten, Dialogfelder usw. Die Verwendung dieser Komponenten finden Sie in der Element-Dokumentation. Nachdem wir erfahren haben, wie man Komponenten einfügt und verwendet, können wir benutzerdefinierte Designs verwenden, um Farben und Stile zu ändern und der Seite mehr Schönheit und Interaktivität zu verleihen. Ich hoffe, dieser Artikel hilft Ihnen beim Erlernen von Vue und Element.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie eine Elementkomponente auf der Vue-Seite (Schritte). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!