VUE中使用MUI方法

VUE中如何使用MUI

為德清等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及德清網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設、德清網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

1、第一步：下載MUI

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

2、第二步：拷貝文件

拷貝下載文件的dist目錄中的三個文件復制到自己項目中創(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)頁源代碼 > 復制相應代碼（這個相應代碼是你需要的樣式的代碼）

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

5、第五步：復制需求樣式源碼

點擊卡片視圖后，進入視圖頁面

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

第三個卡片視圖源碼： 

<div class="mui-card">

<div class="mui-card-header mui-card-media" ></div>

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

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

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

<p >這里顯示文章摘要，讓讀者對文章內容有個粗略的概念...</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中使用MUI方法
轉載來源：http://muchs.cn/article22/ijcicc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、定制開發(fā)、定制網(wǎng)站、建站公司、網(wǎng)站導航、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)