Was ist die Mint-Benutzeroberfläche in Vue?-View.js-php.cn

Was ist die Mint-Benutzeroberfläche in Vue?

青灯夜游

Freigeben： 2020-11-25 12:05:17

Original

2655 Leute haben es durchsucht

In Vue ist Mint UI eine mobile Komponentenbibliothek, die auf Vue.js Open Source basiert und vom Ele.me-Team bereitgestellt wird. Mint UI enthält eine Fülle von CSS- und JS-Komponenten, die den täglichen mobilen Entwicklungsanforderungen gerecht werden. Dadurch können Sie schnell eine Seite mit einem einheitlichen Stil erstellen und die Entwicklungseffizienz verbessern.

Was ist die Mint-Benutzeroberfläche in Vue?

Mint UI ist eine mobile Komponentenbibliothek, die auf Vue.js Open Source basiert und vom Ele.me-Team bereitgestellt wird.

Offizielle Website: https://mint-ui.github.io/#!/zh-cn

Chinesische Dokumentation: http://mint-ui.github.io/docs/#/zh-cn2

Funktionseinführung

Mint UI enthält umfangreiche CSS- und JS-Komponenten, die den täglichen mobilen Entwicklungsanforderungen gerecht werden können. Dadurch können Sie schnell eine Seite mit einem einheitlichen Stil erstellen und die Entwicklungseffizienz verbessern.
Echtes Laden von Komponenten nach Bedarf. Sie können nur die deklarierten Komponenten und ihre Stildateien laden, ohne befürchten zu müssen, dass die Datei zu groß wird.
Unter Berücksichtigung der Leistungsschwelle des mobilen Endgeräts verwendet Mint UI CSS3, um verschiedene Animationen zu verarbeiten, um unnötiges Neuzeichnen und Neuanordnen des Browsers zu vermeiden, sodass Benutzer ein reibungsloses und reibungsloses Erlebnis erhalten können.
Mint UI basiert auf der effizienten Komponentisierungslösung von Vue.js und ist leichtgewichtig. Selbst wenn alle importiert werden, beträgt die komprimierte Dateigröße nur ~30 KB (JS + CSS) gzip.

Verwenden der Mint-Benutzeroberfläche in Vue-cli

Wir verwenden vue-cli, um komponentenbasierte Projekte zu erstellen. Tatsächlich gibt es drei Möglichkeiten, die Mint-Benutzeroberfläche direkt in index.html einzuführen in

Wir verwenden vue-cli, um ein Projekt zu erstellen, und der Prozess wird nicht demonstriert. Wie bereits erwähnt, schauen wir uns den Kerncode direkt an

1), verwenden Sie cdn in index.html, um Mint-UI-bezogenes CSS einzuführen und js

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>mint-ui-demo</title>
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
</head>
<body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue@2.5.11/dist/vue.js"></script>
<!-- built files will be auto injected -->
<scrip tsrc="https://unpkg.com/mint-ui/lib/index.js"></script>
<div id="app"></div>
</body>
</html>

Nach dem Login kopieren

Externe Mint-UI konfigurieren

2), webpack.base.conf.js konfigurieren, den folgenden Code hinzufügen

Mint-UI konfigurieren Was ist die Mint-Benutzeroberfläche in Vue?
Wir konfigurieren es in module.exports von webpack.base. conf.js Externals, Externals stellen die Komponenten für die globale Verwendung bereit

PS: Hier sollten wir auf die key:vaule-Form der Externals-Konfiguration achten. Der Wert hier soll nach Belieben konfiguriert werden, aber nach dem Testen Ich selbst, Sie können es hier nicht beiläufig konfigurieren. Es muss genau mit dem Modulnamen übereinstimmen, der von den entsprechenden js bereitgestellt wird. Wir können uns den Quellcode von mint-ui.js ansehen

Sehen Sie es, mint-ui Was für unsere Verwendung verfügbar gemacht wird, ist MINT, daher muss der Wert von Externals dieser Wert sein, der „nicht nach Belieben konfiguriert werden kann“ Was ist die Mint-Benutzeroberfläche in Vue?

3 Ändern Sie main.js

import MINT from&#39;mint-ui&#39;
Vue.use(MINT)

Nach dem Login kopieren

Fügen Sie die beiden oben genannten hinzu Sätze, stellen Sie mint-ui vor und verwenden Sie es

Nach dem obigen Teil 3 haben wir mint-ui mit CDN konfiguriert, testen wir es

4 Fügen Sie der Vorlage in App.vue den folgenden Code hinzu

<template>
<div id="app">
<mt-button type="default">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button>
<router-view/>
</div>
</template>

Nach dem Login kopieren

5. Führen Sie es aus, um die Ergebnisse zu sehen.

Wie wäre es, wenn Sie den Button-Effekt von Mint-UI perfekt darstellen würden? Empfehlungen: 2020 neueste 5 vue.js Video-Tutorial-Auswahl Was ist die Mint-Benutzeroberfläche in Vue?

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung
! !

Das obige ist der detaillierte Inhalt vonWas ist die Mint-Benutzeroberfläche in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!