vuejs可以使用mui,方法:1、去github下載MUI檔案;2、拷貝下載檔案的dist目錄中的三個檔案複製到mui專案目錄中;3、在main.js檔案中,引入mui的css樣式檔;4、依需求將樣式源碼加入指定頁面。
本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。
VUE中如何使用MUI
#1、第一步:下載MUI
百度搜尋MUI進入其官網點選右上角github位址,下載MUI檔案
#2、第二步:拷貝檔案
拷貝下載檔案的dist目錄中的三個檔案複製到自己專案中建立的mui目錄中。 若引入的mui.css報錯誤,可能是mui中url會指向一些圖片,將圖片地址的單引號改為
雙引號就可以了。
3、第三個步驟:引入MUI的樣式
在main.js檔案中,引入mui的css樣式檔案 import 'mui.css檔案的相對路徑
';#如
4、第四步:根據需求將樣式原始碼加入頁面中
1)選擇需求樣式效果
執行mui-master\examples\hello-mui\index.html檔案
右鍵> 查看網頁原始碼> 複製對應程式碼(這個對應程式碼是您需要的樣式的程式碼)
接下來以使用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>
#相關推薦:《vue.js教學
》###以上是vuejs可以使用mui嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!