Comment installer Mint-UI dans vue

Mint UI est une bibliothèque de composants mobiles basée sur Vue.js lancée par l'équipe front-end d'Ele.me. Cet article vous expliquera comment installer et utiliser Mint-UI dans le projet vue. référez-vous à lui

1. Mint UI est une bibliothèque de composants mobiles basée sur Vue.js lancée par l'équipe front-end d'Ele.me. Elle présente les fonctionnalités suivantes : Documentation d'utilisation :

http. ://mint-ui.github.io/#!/zh-cn

• 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.

• Véritable chargement des composants à la demande. Vous pouvez charger uniquement les composants déclarés et leurs fichiers de style, sans vous soucier de la taille trop importante du fichier.

• En tenant compte du seuil de performances du terminal mobile, Mint UI utilise CSS3 pour gérer diverses animations afin d'éviter un redessinage et un réarrangement inutiles du navigateur, afin que les utilisateurs puissent bénéficier d'une expérience fluide. expérience.

• S'appuyant sur la solution de composantisation efficace de Vue.js, Mint UI est légère. Même si tous sont importés, la taille du fichier compressé n'est que d'environ 30 Ko (JS + CSS) gzip.

2. Créez d'abord un projet vue, reportez-vous à l'article précédent //www.jb51.net/article/131600.htm

3. Installez ensuite Mint UI ：

npm i mint-ui --save

Quatrièmement, vous devez introduire Mint UI. Il existe deux situations :

1. Présentez tous les composants

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

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

2. Introduire

à la demande Si vous n'avez besoin d'utiliser qu'un certain composant, vous ne pouvez introduire que Ce composant, Mint UI peut garantir que lorsque le code est empaqueté, les fichiers sans rapport avec ce composant n'apparaîtront pas dans le code final. 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);

Les deux méthodes d'introduction ci-dessus doivent introduire le fichier CSS correspondant séparément. Cela n'est pas pratique, surtout lorsque vous utilisez la méthode d'importation à la demande pour introduire plusieurs composants.

5. Afin d'éviter ce problème, vous pouvez utiliser le plug-in babel-plugin-component.

1. Tout d'abord, bien sûr, installez-le :

npm i babel-plugin-component -D

2. Puis configurez-le en .babelrc :

{
 "presets": [
 ["env", {
  "modules": false,
  "targets": {
  "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
  }
 }],
 "stage-2"
 ],
 "plugins": ["transform-runtime",["component",[
   {"libraryName":"mint-ui","style":true}
  ]]],
 "env": {
 "test": {
  "presets": ["env", "stage-2"],
  "plugins": ["istanbul"]
 }
 }
}

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

//import Mint from 'mint-ui';
//Vue.use(Mint);
//import 'mint-ui/lib/style.css'; //不需要手动导入mint-ui样式
import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);

import { Swipe, SwipeItem } from 'mint-ui'; //按需引入部分组件
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

Le plug-in installé précédemment importera automatiquement le fichier CSS correspondant !

6. Utilisation spécifique des composants de l'interface utilisateur - vous pouvez vous référer directement à la documentation officielle http://mint-ui.github.io/docs/

Au cours du processus d'utilisation, j'ai trouvé que la documentation de l'interface utilisateur Mint n'est pas très détaillée. , de nombreuses utilisations spécifiques nécessitent Baidu supplémentaire...

　1. Tout d'abord, regardez la première introduction et l'utilisation des documents officiels :

Lorsque ce genre de composant est introduit, il y a une ligne Vue.component("对应的组件名"),使用的时候是再vue文档的template部分,使用对应的标签名加属性,其实就是直接复制官方文档的代码即可,不过相对复杂多属性的组件就要另外百度了.

Jetons ensuite un œil au code utilisé dans le projet :

//在main.js里面添加--复制官方文档该组件对应的引入即可
import { Header } from 'mint-ui';
Vue.component(Header.name, Header);
<template>
 <mt-header title="修改客户资料">
   <a @click="toBack" replace slot="left">
    <a class="back-icon"></a>
   </a>
   <!--这个头部导航栏关键的是mt-header父标签,而该标签内的内容是根据需求写的哦-->
 </mt-header>
</template>

Rendu des composants

　2. Regardez ensuite la deuxième introduction et l'utilisation du document du site officiel :

Nous pouvons voir que lorsque ce type de composant est introduit, il n'y a pas de Vue.component("对应的组件名"),然后看基本用法,就这么简单一句......

Je me réfère à la première méthode pour introduire directement le composant Toast du document, puis l'utiliser dans le script à ce moment-là. une erreur sera signalée :

//提示框
import { Toast } from 'mint-ui';
created:function(){
 Toast("使用Toast"); //这里是为了测试才写在created里面,在平时用的时候,是根据自己需要放在对应的位置使用的
}

Baidu Ecoute, il semble que beaucoup de gens ont rencontré ce problème comme moi...

En fait, si si nous regardons la déclaration d'utilisation de Toast, nous pouvons savoir que Toast est une méthode, puisqu'il s'agit d'une méthode, elle peut être directement utilisée dans js. Si elle n'est pas définie, une erreur sera signalée, donc lorsque nous introduisons le composant, nous définissons la méthode comme variable globale :

//在main.js里面添加,这里需要将Toast方法设置为全局变量,否则就要在每个用到该方法的vue页面重新引入该组件....
import { Toast } from 'mint-ui';
window.Toast= Toast;

Après l'avoir configurée, l'erreur ne sera plus signalée. Jetez à nouveau un œil au composant sur la page :

　

Rendu des composants

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Utilisation de JS pour implémenter une horloge de changement d'image (tutoriel détaillé)

Implémentation de la liaison d'attributs DOM dans Angular4

Utiliser JS pour calculer le problème de l'achat de 100 poulets

Comment faire dans Angular4 Implémenter la liaison d'attribut HTML

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!