Heim > Web-Frontend > js-Tutorial > Hauptteil

Implementierungsmethode zur Einführung von Komponenten mithilfe des vue+elementUI-Teils

小云云
Freigeben: 2018-01-16 09:16:07
Original
2854 Leute haben es durchsucht

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
Nach dem Login kopieren

2. Erstellen Sie ein Projekt. projectName ist der Name Ihres Projekts

npm install webpack projectName
Nach dem Login kopieren

3. Geben Sie das Projektverzeichnis ein

cd projectName
Nach dem Login kopieren

4. Initialisieren Sie die Projektinstallationsabhängigkeiten

npm install
Nach dem Login kopieren

5

npm install element-ui --save -dev
Nach dem Login kopieren
6. Stellen Sie zunächst fest, ob das Projekt über einen Style-Loader und eine Babel-Plugin-Komponente verfügt.


npm install xxx --save -dev
Nach dem Login kopieren
7 und grob, suchen Sie .babelrc und kopieren Sie den ursprünglichen Dateiinhalt. Löschen Sie sie alle und fügen Sie den folgenden Code ein:


 { "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"]
  }
  }
 }
Nach dem Login kopieren
8. Fügen Sie den folgenden Satz zu webpack.base.conf.js

hinzu

{
 test: /\.css$/,
 loader: 'style-loader'
},
Nach dem Login kopieren
9. In mian.js einführen


 import { Button,Input } from 'element-ui'
 Vue.use(Button)
 Vue.use(Input)
Nach dem Login kopieren
10. Dann können Sie Button und Input verwenden

vue führt elementUI ein und meldet einen Fehler

Führen Sie import 'element-ui in main.js /lib/theme-default/index.css' ein und das Projekt kann nicht gestartet werden. Dies dient dazu, das Webpack in package.json in „webpack“ zu ändern. beta“ und installieren Sie es neu. Dann kann es gestartet werden

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!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage