Die UI-Komponentenbibliothek von vue.js verfügt über mehrere Projekte auf Git. Die beiden Komponentenbibliotheken, die ich bei mehr Benutzern sehe, sind iView und Element. Beide verfügen über umfangreiche Komponenten. Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zur Verwendung von vue + elementUI zum Implementieren einiger importierter Komponenten ein und stellt die Lösung für den Fehler vor, wenn vue elementUI einführt. Der Artikel stellt es im Detail anhand des Beispielcodes vor Unten sind die kleinen „Lass uns gemeinsam lernen“.
Einführung von der offiziellen Website
iView: eine Reihe hochwertiger UI-Komponentenbibliotheken basierend auf Vue.js
Element, one Eine Reihe von Komponentenbibliotheken basierend auf Vue 2.0, die für Entwickler, Designer und Produktmanager erstellt wurden und unterstützende Designressourcen bereitstellen, damit Ihre Website schnell Gestalt annimmt.
Beide haben ihre eigenen Vor- und Nachteile, daher werde ich nicht zu viel kommentieren. Aufgrund meiner eigenen Bedürfnisse habe ich mich letztendlich für Element entschieden. Da das Unternehmen kürzlich ein kleines Backend-Projekt entwickelt hat, habe ich darüber nachgedacht, einige Komponenten von element einzuführen. Da ich zum ersten Mal keine Erfahrung mit der Einführung habe, habe ich viel im Internet gelesen und es gibt solche und solche Probleme Die offizielle Website hat es mir nicht klar erklärt (vielleicht ist mein Niveau zu niedrig), also habe ich es selbst studiert und selbst getestet. Wenn es Fehler gibt, weisen Sie sie bitte darauf hin.
Implementierungsmethode
1. Installieren Sie vue-cli
npm install -g vue-cli
2. Erstellen Sie ein Projekt. projectName ist der Name Ihres Projekts
npm install webpack projectName
3. Geben Sie das Projektverzeichnis ein
cd projectName
4. Initialisieren Sie die Projektinstallationsabhängigkeiten
npm install
5
npm install element-ui --save -dev
npm install xxx --save -dev
{ "presets": [["env", { "modules": false, "targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]} }], "stage-2"], "plugins": [ "transform-runtime", ["component",[ { "libraryName":"element-ui", "styleLibraryName":"theme-default" //1.4的老项目用这个,2.0的用theme-chalk,假设没效果看看官网又把默认的主题改 成那个了 跟着改一下应该就可以了 } ]] ], "comments":false, "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["istanbul"] } } }
hinzu
{ test: /\.css$/, loader: 'style-loader' },
import { Button,Input } from 'element-ui' Vue.use(Button) Vue.use(Input)
Verwandte Empfehlungen:
Vue2.0, ElementUI zur Implementierung des Umblätterns von Tabellenseiten
Vue Element-UI-Eingabe-Remote-Suchbeispiel, ausführliche Erklärung
Verwenden Sie VUE Element-UI, um eine wiederverwendbare Tabellenkomponente zu schreiben
Das obige ist der detaillierte Inhalt vonImplementierungsmethode zur Einführung von Komponenten mithilfe des vue+elementUI-Teils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!