Comment utiliser la bibliothèque de composants mobiles Vue.js

Cette fois, je vais vous expliquer comment utiliser la bibliothèque de composants mobiles Vue.js. Quelles sont les précautions lors de l'utilisation de la bibliothèque de composants mobiles Vue.js. Jetons un coup d'oeil une fois.

Mint UI contient de riches composants CSS et JS, qui peuvent répondre aux besoins quotidiens de développement mobile. Grâce à lui, vous pouvez rapidement créer une page avec un style unifié et améliorer l'efficacité du développement.

Chargez des composants à la demande dans le vrai sens du terme. Vous pouvez charger uniquement les composants déclarés et leurs fichiers de style, sans vous soucier de la taille trop volumineuse du fichier.

Compte tenu du seuil de performances du terminal mobile, Mint UI utilise CSS3 pour gérer diverses animations afin d'éviter les redessins et réarrangements inutiles du navigateur, afin que les utilisateurs puissent obtenir une expérience fluide et fluide.

S'appuyant sur la solution de composantisation efficace de Vue.js, Mint UI est légère. Même si tous sont introduits, la taille du fichier compressé n’est que de 100+ Ko.

Interface utilisateur Mint

Mint UI, lancée par l'équipe front-end d'Ele.me, est une bibliothèque de composants mobiles basée sur Vue.js. depuis 6 Depuis qu'il est open source au début du mois, sur la base des retours de la communauté et au sein de l'équipe, certains bugs ont été corrigés et de nouveaux composants ont été ajoutés. La version 0.2.0 est sortie cette semaine. Cet article explique comment créer un programme à partir de zéro en utilisant Projet Vue pour Mint UI.

Échafaudage

Avec le développement rapide de Vue.js, il existe actuellement de nombreuses options pour créer un échafaudage pour un projet Vue. Par exemple, vous pouvez utiliser le vue-cli officiellement fourni. Cet article utilise le propre outil de construction d'Ele.me pour accomplir cette tâche.

Tout d’abord, installez Cooking globalement :

npm i cooking -g

Créez un nouveau dossier de projet :

mkdir mint-ui-example

Entrez dans le dossier du projet et utilisez la cuisine pour construire :

cooking init vue

Le dernier paramètre vue indique que l'échafaudage est construit sur la base de Vue.js.

Parmi eux, "Quel prétraitement CSS utiliser" est Salad, qui est une solution basée sur PostCSS. Les étudiants intéressés peuvent en apprendre davantage. Bien entendu, vous pouvez également choisir d’autres préprocesseurs.

Installez ensuite Mint UI :

npm i mint-ui --save

Présentation de l'interface utilisateur Mint

Bon, le travail ultérieur peut être divisé en deux situations :

1. Présentez tous les composants

Si votre projet utilise plus de composants dans Mint UI, le moyen le plus simple consiste à tous les importer. À ce stade, il doit être dans le fichier d'entrée main.js :

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

2. Présenter sur demande

Si vous n'avez besoin d'utiliser qu'un certain composant, vous ne pouvez introduire que ce composant. Mint UI peut garantir que les fichiers sans rapport avec ce composant n'apparaîtront pas dans le code final lorsque le code est empaqueté. Par exemple, si vous devez introduire le composant Button, dans main.js :

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

On peut voir que les deux méthodes d'importation ci-dessus nécessitent que les fichiers CSS correspondants soient importés séparément. Cela n'est pas pratique, surtout lorsque vous utilisez la méthode d'importation à la demande pour introduire plusieurs composants. Pour éviter ce problème, vous pouvez utiliser le plugin babel-plugin-component . La première chose est bien sûr de l'installer :

npm i babel-plugin-component -D

Configurez-le ensuite en .babelrc :

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

De cette façon, les deux méthodes d'introduction ci-dessus peuvent être simplifiées en :

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

et

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

Le plug-in importera automatiquement les fichiers CSS correspondants.

Utiliser

Veuillez lire la documentation pour la méthode d'utilisation de chaque composant. Voici juste un petit exemple. Dans 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>

Ce qui précède est une introduction à la façon d’utiliser Mint UI. Si vous rencontrez des problèmes lors de l'utilisation ou souhaitez nous faire part de quelques suggestions, vous êtes invités à signaler un problème dans le référentiel GitHub.

可能有些同学知道，除了这个移动端组件库以外，饿了么还有一套桌面端组件库 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上拉加载与下拉刷新冲突处理方法

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!