首頁  >  文章  >  web前端  >  vuejs可以使用mui嗎

vuejs可以使用mui嗎

青灯夜游
青灯夜游原創
2021-09-22 14:58:392130瀏覽

vuejs可以使用mui,方法:1、去github下載MUI檔案;2、拷貝下載檔案的dist目錄中的三個檔案複製到mui專案目錄中;3、在main.js檔案中,引入mui的css樣式檔;4、依需求將樣式源碼加入指定頁面。

vuejs可以使用mui嗎

本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。

VUE中如何使用MUI

#1、第一步:下載MUI

百度搜尋MUI進入其官網點選右上角github位址,下載MUI檔案 

vuejs可以使用mui嗎

#2、第二步:拷貝檔案

拷貝下載檔案的dist目錄中的三個檔案複製到自己專案中建立的mui目錄中。 若引入的mui.css報錯誤,可能是mui中url會指向一些圖片,將圖片地址的單引號改為

雙引號

就可以了。 vuejs可以使用mui嗎

3、第三個步驟:引入MUI的樣式

在main.js檔案中,引入mui的css樣式檔案 import 'mui.css檔案的相對路徑

';

#如

import '../mui/css/mui.css';

vuejs可以使用mui嗎

4、第四步:根據需求將樣式原始碼加入頁面中

1)選擇需求樣式效果

執行mui-master\examples\hello-mui\index.html檔案

右鍵> 查看網頁原始碼> 複製對應程式碼(這個對應程式碼是您需要的樣式的程式碼)

接下來以使用MUI的 卡檢視的第三個卡片(有圖片有文字的那張) 為例

vuejs可以使用mui嗎

vuejs可以使用mui嗎

2)複製需求樣式原始碼

點擊卡片視圖後,進入視圖頁面##右鍵滑鼠> 點擊查看網頁原始碼> 複製自己要套用的程式碼>將複製的程式碼貼到你要使用的那個頁面中

第三個卡片檢視原始碼: 

<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>
vuejs可以使用mui嗎

#相關推薦:《vue.js教學

》###

以上是vuejs可以使用mui嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn