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

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

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

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"]
  }
  }
 }

8. Fügen Sie den folgenden Satz zu webpack.base.conf.js

hinzu

{
 test: /\.css$/,
 loader: 'style-loader'
},

9. In mian.js einführen

 import { Button,Input } from 'element-ui'
 Vue.use(Button)
 Vue.use(Input)

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!