So referenzieren Sie die Komponentenbibliothek im Vue-Projekt

Vue ist ein sehr beliebtes Front-End-Framework in der heutigen Internetentwicklung. Seine komponentenbasierte Entwicklungsmethode kann die Wartbarkeit und Entwicklungseffizienz des Projekts effektiv verbessern. Bei der Vue-Projektentwicklung verwenden wir häufig Komponentenbibliotheken von Drittanbietern, um schnell verschiedene Interaktionen und Seitenelemente zu erstellen. In diesem Artikel wird erläutert, wie Sie auf Komponentenbibliotheken in Vue-Projekten verweisen.

1. Häufig verwendete Komponentenbibliotheken

In Vue-Projekten werden viele Komponentenbibliotheken verwendet. Die gebräuchlichsten sind die folgenden:

1. Element-UI: Eine UI-Komponentenbibliothek basierend auf Vue 2.0, einschließlich einer großen Anzahl häufig verwendeter Verwendete Komponenten Komponenten wie Schaltflächen, Tabellen, Popups, Datumsauswahl usw.
2. Ant Design von Vue: Eine Vue-Version von Ant Design, die eine Reihe schöner Komponentenbibliotheken bereitstellt.
3. Vuetify: Eine Vue-Komponentenbibliothek basierend auf Material Design, die eine Reihe schöner und reichhaltiger Komponenten bereitstellt.
4. Vue Material: Eine weitere Vue-Komponentenbibliothek basierend auf Material Design, die eine vollständige, anspruchsvolle und professionelle UI-Komponentenlösung bietet.

2. So referenzieren Sie die Komponentenbibliothek

Bevor Sie mit der Verwendung der Komponentenbibliothek beginnen, müssen Sie die entsprechenden Bibliotheksdateien installieren und in das Projekt einführen. Am Beispiel der Element-UI-Komponentenbibliothek stellen wir vor, wie die Komponentenbibliothek in das Vue-Projekt eingeführt wird.

1. Element-UI installieren

Sie können den folgenden Befehl in der Terminal-Befehlszeile ausführen, um zu installieren:

npm i element-ui -S

2. Element-UI einführen

Im Vue-Projekt, wenn Sie Element-UI-Komponenten verwenden möchten Auf der Seite müssen Sie Element-UI in der Datei main.js einführen:

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

Vue.use(ElementUI)

Führen Sie zunächst Element-UI über die Importanweisung ein und fügen Sie es dann über die Methode Vue.use() in die Vue-Instanz ein. Es ist zu beachten, dass auch die CSS-Stildatei von element-ui eingeführt werden muss, da sie sonst nicht richtig auf der Seite angezeigt wird.

Wenn Sie nur einige Komponenten von Element-UI verwenden möchten, können Sie eine neue element-ui.js-Datei im Komponentenordner erstellen, die erforderlichen Komponenten darin einfügen und sie dann bei Bedarf in die .vue-Datei einfügen Verwenden Sie die Komponente.

Um beispielsweise die el-dialog-Komponente von Element-ui zu verwenden, erstellen Sie eine neue element-ui.js-Datei:

import Vue from 'vue'
import { Dialog } from 'element-ui'

Vue.use(Dialog)

Fügen Sie sie dann in die .vue-Datei ein, die die el-dialog-Komponente verwenden muss:

<template>
  <el-dialog></el-dialog>
</template>

<script>
  import 'element-ui/lib/theme-chalk/dialog.css';
  import Dialog from "@/components/element-ui";
  
  export default {
    components: {
      'el-dialog': Dialog.Dialog
    }
  }
</script>

Sie müssen element-hier die Dialog.css-Stildatei von ui einführen, die Dialogkomponente über die Importanweisung einführen und sie in der aktuellen Vue-Instanz registrieren. Ordnen Sie in der Option .components die el-dialog-Komponente Dialog.Dialog zu, und Sie können die el-dialog-Komponente auf der Seite verwenden.

3. Zusammenfassung

Die Verwendung von Komponentenbibliotheken von Drittanbietern in Vue-Projekten ist eine gute Möglichkeit, die Entwicklungseffizienz zu verbessern und die Schönheit der Website zu steigern. In diesem Artikel wird erläutert, wie die Element-UI-Komponentenbibliothek vorgestellt wird. Leser können entsprechend ihren eigenen Anforderungen andere Komponentenbibliotheken auswählen und diese auf ähnliche Weise einführen und verwenden.

Das obige ist der detaillierte Inhalt vonSo referenzieren Sie die Komponentenbibliothek im Vue-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!