Qu'est-ce que Mint UI dans vue ?-Voir.js-php.cn

Qu'est-ce que Mint UI dans vue ?

青灯夜游

Libérer： 2020-11-25 12:05:17

original

2727 Les gens l'ont consulté

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.

Qu'est-ce que Mint UI dans vue ?

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>

Copier après la connexion

Configurer les externes mint-ui

2) Configurez webpack.base.conf.js et ajoutez le code suivant

Quest-ce que Mint UI dans vue ?
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

Quest-ce que Mint UI dans vue ?

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&#39;mint-ui&#39;
Vue.use(MINT)

Copier après la connexion

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>

Copier après la connexion

5. Exécutez et affichez les résultats

Quest-ce que Mint UI dans vue ?

Que diriez-vous de l'affichage parfait de l'effet Button de Mint-ui

Recommandations associées :

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

Pour plus de connaissances liées à la programmation, veuillez visiter :

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!