Maison > Article > interface Web > Qu'est-ce que Mint UI dans vue ?
Qu'est-ce que Mint UI dans vue ?
- 青灯夜游original
- 2020-11-25 12:05:172737parcourir
In vue, Mint UI est une bibliothèque de composants mobiles basée sur Vue.js et open source par l'équipe Ele.me. Mint UI contient une multitude de 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.
Mint UI est une bibliothèque de composants mobiles basée sur Vue.js et open source par l'équipe Ele.me.
Site officiel : https://mint-ui.github.io/#!/zh-cn
Documentation chinoise : http://mint-ui.github.io/docs/ # /zh-cn2
Introduction aux fonctionnalités
L'interface utilisateur Mint contient des composants CSS et JS riches, 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 volumineuse 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.
Utilisation de l'interface utilisateur Mint dans Vue-cli
Nous utilisons vue-cli pour créer des projets composés de composants. il existe trois façons d'introduire Mint UI
(1) Introduisez directement
dans index.html Nous utilisons vue-cli pour créer un projet. Avant cependant, regardons directement le code principal
1), utilisez cdn dans index.html pour introduire les CSS et js liés à Mint-UI
<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>
Configurer les externes mint-ui
2) Configurez webpack.base.conf.js et ajoutez le code suivant
Configurez mint-ui
Notre module.exports dans webpack.base.conf. js Configuration des externes, les externes exposent les composants pour une utilisation globale
PS : Ici, nous devons faire attention à la forme key:vaule de la configuration des externes. La valeur ici est dite être configurée à volonté dans de nombreux articles, mais Après l'avoir testé moi-même, vous ne pouvez pas le configurer avec désinvolture. Il doit être exactement le même que le nom du module exposé par le js concerné, c'est MINT. Nous pouvons jeter un œil au code source de mint-ui. js
Comme vous pouvez le voir, mint-ui expose MINT pour notre usage, donc la valeur des externes doit être cette valeur "ne peut pas être configurée à volonté"
3. Modifiez main.js
import MINT from'mint-ui' Vue.use(MINT)
Ajoutez les deux phrases ci-dessus, introduisez mint-ui et utilisez-le
Après les trois étapes ci-dessus, nous avons configuré mint-ui en utilisant cdn, testons-le
4. Ajoutez le code suivant au modèle dans App.vue
<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>
5. Exécutez et affichez les résultats
Recommandations associées :Pour plus de connaissances liées à la programmation, veuillez visiter :
Résumé des questions d'entretien avec vue frontale 2020 (avec réponses)
Recommandation du didacticiel Vue : les 5 dernières sélections de didacticiels vidéo vue.js en 2020
Introduction à la programmation ! !
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!