vuejs可以使用mui，方法：1、去github下載MUI文件；2、拷貝下載文件的dist目錄中的三個(gè)文件復(fù)制到mui項(xiàng)目目錄中；3、在main.js文件中，引入mui的css樣式文件；4、根據(jù)需求將樣式源碼添加到指定頁(yè)面中。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

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的css樣式文件

import 'mui.css文件的相對(duì)路徑';

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

4、第四步：根據(jù)需求將樣式源碼添加到頁(yè)面中

1）選擇需求樣式效果

運(yùn)行mui-masterexampleshello-muiindex.html文件

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

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

2）復(fù)制需求樣式源碼

點(diǎn)擊卡片視圖后，進(jìn)入視圖頁(yè)面

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

第三個(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>