So verwenden Sie die mobile Komponentenbibliothek von Vue.j

Dieses Mal erkläre ich Ihnen, wie Sie die mobile Komponentenbibliothek von Vue.js verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung der mobilen Komponentenbibliothek von Vue.js? Werfen wir einmal einen Blick.

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.

Laden Sie Komponenten im wahrsten Sinne des Wortes 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.

In Anbetracht 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 eingeführt werden, beträgt die komprimierte Dateigröße nur 100+ K.

Mint-Benutzeroberfläche

Mint UI wurde vom Ele.me-Frontend-Team gestartet und ist eine mobile Komponentenbibliothek, die auf Vue.js basiert. seit 6 Da es zu Beginn des Monats als Open Source verfügbar war, wurden einige Fehler behoben und einige neue Komponenten hinzugefügt, basierend auf dem Feedback der Community und dem Team. Version 0.2.0 wurde diese Woche veröffentlicht. In diesem Artikel wird erläutert, wie Sie mit ein Programm von Grund auf erstellen Vue-Projekt für Mint UI.

Gerüst

Mit der rasanten Entwicklung von Vue.js gibt es derzeit viele Möglichkeiten, Gerüste für ein Vue-Projekt zu bauen. Sie können beispielsweise das offiziell bereitgestellte vue-cli verwenden. In diesem Artikel wird das eigene Build-Tool Cooking von Ele.me verwendet, um diese Aufgabe abzuschließen.

Installieren Sie Cooking zunächst global:

npm i cooking -g

Erstellen Sie einen neuen Projektordner:

mkdir mint-ui-example

Geben Sie den Projektordner ein und verwenden Sie Cooking zum Erstellen:

cooking init vue

Der letzte Parameter vue gibt an, dass das Gerüst auf Basis von Vue.js erstellt wurde.

Darunter ist „Welche CSS-Vorverarbeitung soll verwendet werden?“ Hier ist Salad, eine auf PostCSS basierende Lösung. Interessierte Studenten können mehr darüber erfahren. Natürlich können Sie auch andere Präprozessoren wählen.

Als nächstes Mint UI installieren:

npm i mint-ui --save

Einführung in die Mint-Benutzeroberfläche

Okay, die anschließende Arbeit kann in zwei Situationen unterteilt werden:

1. Stellen Sie alle Komponenten vor

Wenn Ihr Projekt mehr Komponenten in Mint UI verwenden wird, ist es am einfachsten, sie alle einzuführen. Zu diesem Zeitpunkt muss es sich in der Eintragsdatei main.js befinden:

import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(MintUI);

2. Auf Anfrage vorstellen

Wenn Sie nur eine bestimmte Komponente verwenden müssen, können Sie nur diese Komponente einführen. Mit der Mint-Benutzeroberfläche kann sichergestellt werden, dass Dateien, die nichts mit dieser Komponente zu tun haben, nicht im endgültigen Code angezeigt werden, wenn der Code gepackt wird. Wenn Sie beispielsweise die Button-Komponente in main.js einführen müssen:

import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';
Vue.component(Button.name, Button);

Es ist ersichtlich, dass die beiden oben genannten Importmethoden einen separaten Import der entsprechenden CSS-Dateien erfordern. Dies ist unpraktisch, insbesondere wenn Sie die On-Demand-Importmethode verwenden, um mehrere Komponenten einzuführen. Um dieses Problem zu vermeiden, können Sie das Plugin babel-plugin-component verwenden. Als Erstes muss es natürlich installiert werden:

npm i babel-plugin-component -D

Dann konfigurieren Sie es in .babelrc:

{
 "plugins": ["other-plugin", ["component", [
 { "libraryName": "mint-ui", "style": true }
 ]]]
}

Auf diese Weise können die beiden oben genannten Einführungsmethoden vereinfacht werden zu:

import MintUI from 'mint-ui';
Vue.use(MintUI);

und

import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);

Das Plug-in importiert automatisch die entsprechenden CSS-Dateien.

Verwenden Sie

Bitte lesen Sie die Dokumentation zur -Methode zur Verwendung der einzelnen -Komponenten. Hier ist nur ein kleines Beispiel. In app.vue:

<template>
 <h1>mint-ui-example</h1>
 <mt-button
 type="primary"
 @click="sheetVisible = true">
 选择操作
 </mt-button>
 <mt-actionsheet
 cancel-text=""
 :actions="actions"
 :visible.sync="sheetVisible">
 </mt-actionsheet>
</template>
<script>
 import { Toast, MessageBox } from 'mint-ui';
 export default {
 name: 'app',
 data() {
 return {
 sheetVisible: false,
 actions: [{
 name: '展示 Toast',
 method: this.showToast
 }, {
 name: '展示 Message Box',
 method: this.showMsgbox
 }]
 };
 },
 methods: {
 showToast() {
 Toast('这是一个 Toast');
 },
 showMsgbox() {
 MessageBox('提示', '这是一个 Message Box');
 }
 }
 };
</script>

Das Obige ist eine Einführung in die Verwendung der Mint-Benutzeroberfläche. Wenn Sie während der Nutzung auf Probleme stoßen oder uns Anregungen geben möchten, können Sie gerne ein Problem im GitHub-Repository melden.

可能有些同学知道，除了这个移动端组件库以外，饿了么还有一套桌面端组件库 vue-desktop。目前我们正在对它进行重构，这次有了 UED 的介入，整体视觉有了很大的提升。完成后也会开源，而且会有两个版本，分别支持 vue 1.0.x 和 vue 2.0。当然，Mint UI 也会考虑支持 vue 2.0。

PS: mint-ui在手机页面的样式不正常问题

 问题一、

在使用 vue2.0 +mint-ui 时pc端的样式没有问题但是手机端的就缩小了，失去了想要的效果

这是一个头文件的申明问题在入口文件index.html里的标签里加上这个代码即可

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue父子组件通信使用方法

mint-ui loadmore上拉加载与下拉刷新冲突处理方法

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die mobile Komponentenbibliothek von Vue.j. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!