Vuejs peut-il utiliser mui ?

vuejs peut utiliser mui, méthode : 1. Allez sur github pour télécharger le fichier MUI ; 2. Copiez les trois fichiers du répertoire dist du fichier téléchargé dans le répertoire du projet mui ; le CSS du fichier de style mui ; 4. Ajoutez le code source du style à la page spécifiée selon les exigences.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Comment utiliser MUI dans VUE

1. Première étape : Téléchargez MUI

Recherchez MUI sur Baidu et entrez sur son site officiel. Cliquez sur l'adresse github dans le coin supérieur droit pour télécharger le fichier MUI.

2. Deuxième étape : Copiez les fichiers

Copiez les trois fichiers du répertoire dist du fichier téléchargé dans le répertoire mui créé dans votre projet.

Si le mui.css importé signale une erreur, il se peut que l'url dans mui pointe vers certaines images. Remplacez simplement les guillemets simples dans l'adresse de l'image par guillemets doubles.

3. Étape 3 : Introduisez le style MUI

Dans le fichier main.js, introduisez le fichier de style mui css

import 'chemin relatif du fichier mui.css';

Tel que import '../mui/css/mui.css';

4. Étape 4 : Ajoutez le code source du style à la page en fonction des besoins

1) Sélectionnez l'effet de style requis

et exécutez le fichier mui-masterexampleshello-muiindex.html

droit -cliquez sur > Afficher la page Web Code source > Copiez le code correspondant (ce code correspondant est le code du style dont vous avez besoin)

Ensuite, prenez la troisième carte de la vue carte en utilisant MUI (celle avec des images et du texte) à titre d'exemple

2) Copiez le code source du style requis

Cliquez sur la vue de la carte et entrez dans la page d'affichage

Cliquez avec le bouton droit de la souris> Copiez le code que vous souhaitez appliquer> Collez le code copié où vous le souhaitez

Le code source de la troisième vue de la carte dans la page utilisée :

<div class="mui-card">

<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../images/cbd.jpg)"></div>

<div class="mui-card-content">

<div class="mui-card-content-inner">

<p>Posted on January 18, 2016</p>

<p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>

</div>

</div>

<div class="mui-card-footer">

<a class="mui-card-link">Like</a>

<a class="mui-card-link">Read more</a>

</div>

</div>

Recommandations associées : "tutoriel vue.js"

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!