VUE中使用MUI方法
VUE中如何使用MUI
1、第一步:下載MUI
百度搜索MUI進(jìn)入其官網(wǎng)點(diǎn)擊右上角github地址,下載MUI文件
2、第二步:拷貝文件
拷貝下載文件的dist目錄中的三個(gè)文件復(fù)制到自己項(xiàng)目中創(chuàng)建的mui目錄中 。
若引入的mui.css報(bào)錯(cuò),可能是mui中url會(huì)指向一些圖片,將圖片地址的單引號(hào)改為雙引號(hào)就可以了。
3、第三步:引入MUI的樣式
在main.js文件中,引入mui的樣式
import 'mui.css文件的相對(duì)路徑';
如 import '../mui/css/mui.css';
4、第四步:選擇需求樣式效果
運(yùn)行mui-master\examples\hello-mui\index.html文件
右鍵 > 查看網(wǎng)頁源代碼 > 復(fù)制相應(yīng)代碼(這個(gè)相應(yīng)代碼是你需要的樣式的代碼)
接下來以使用MUI的 卡片視圖的第三個(gè)卡片(有圖片有文字的那個(gè)) 為例
5、第五步:復(fù)制需求樣式源碼
點(diǎn)擊卡片視圖后,進(jìn)入視圖頁面
右鍵鼠標(biāo) > 點(diǎn)擊查看網(wǎng)頁源代碼 > 復(fù)制自己所要應(yīng)用的代碼 >將復(fù)制的代碼粘貼到你所要使用的那個(gè)頁面中
第三個(gè)卡片視圖源碼:
<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;">這里顯示文章摘要,讓讀者對(duì)文章內(nèi)容有個(gè)粗略的概念...</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>
相關(guān)文章
前端虛擬滾動(dòng)列表實(shí)現(xiàn)代碼(vue虛擬列表)
前端的性能瓶頸那就是頁面的卡頓,當(dāng)然這種頁面的卡頓包含了多種原因,下面這篇文章主要給大家介紹了關(guān)于前端虛擬滾動(dòng)列表實(shí)現(xiàn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06vue根據(jù)權(quán)限動(dòng)態(tài)渲染按鈕、組件等的函數(shù)式組件實(shí)現(xiàn)
這篇文章主要介紹了vue根據(jù)權(quán)限動(dòng)態(tài)渲染按鈕、組件等的函數(shù)式組件實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望杜大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11Vue項(xiàng)目打包、合并及壓縮優(yōu)化網(wǎng)頁響應(yīng)速度
網(wǎng)站頁面的響應(yīng)速度與用戶體驗(yàn)息息相關(guān),直接影響到用戶是否愿意繼續(xù)訪問你的網(wǎng)站,所以這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包、合并及壓縮優(yōu)化網(wǎng)頁響應(yīng)速度的相關(guān)資料,需要的朋友可以參考下2021-07-07vue3+vite實(shí)現(xiàn)在線預(yù)覽pdf功能
這篇文章主要為大家詳細(xì)介紹了如何通過vue3和vite實(shí)現(xiàn)在線預(yù)覽pdf功能,文中的示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,感興趣的小伙伴可以學(xué)習(xí)一下2023-10-10vue中的el-form表單rule校驗(yàn)問題(特殊字符、中文、數(shù)字等)
這篇文章主要介紹了vue中的el-form表單rule校驗(yàn)問題(特殊字符、中文、數(shù)字等),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05Vue中點(diǎn)擊active并第一個(gè)默認(rèn)選中功能的實(shí)現(xiàn)
這篇文章主要介紹了Vue中點(diǎn)擊active并第一個(gè)默認(rèn)選中功能的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02vue打包相關(guān)細(xì)節(jié)整理(小結(jié))
這篇文章主要介紹了vue打包相關(guān)細(xì)節(jié)整理(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09