欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VUE中使用MUI方法

 更新時間:2019年02月12日 08:52:33   投稿:laozhang  
在本篇文章里小編給大家分享了關(guān)于VUE中使用MUI方法和步驟,有需要的朋友們可以學(xué)習(xí)參考下。

VUE中如何使用MUI

1、第一步:下載MUI

百度搜索MUI進(jìn)入其官網(wǎng)點擊右上角github地址,下載MUI文件 

2、第二步:拷貝文件

拷貝下載文件的dist目錄中的三個文件復(fù)制到自己項目中創(chuàng)建的mui目錄中 。

若引入的mui.css報錯,可能是mui中url會指向一些圖片,將圖片地址的單引號改為雙引號就可以了。

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

在main.js文件中,引入mui的樣式

import 'mui.css文件的相對路徑';

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

4、第四步:選擇需求樣式效果

運行mui-master\examples\hello-mui\index.html文件

右鍵 > 查看網(wǎng)頁源代碼 > 復(fù)制相應(yīng)代碼(這個相應(yīng)代碼是你需要的樣式的代碼)

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

5、第五步:復(fù)制需求樣式源碼

點擊卡片視圖后,進(jìn)入視圖頁面

右鍵鼠標(biāo) > 點擊查看網(wǎng)頁源代碼 > 復(fù)制自己所要應(yīng)用的代碼 >將復(fù)制的代碼粘貼到你所要使用的那個頁面中

第三個卡片視圖源碼: 

<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;">這里顯示文章摘要,讓讀者對文章內(nèi)容有個粗略的概念...</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)文章

最新評論