vuejs可以使用mui嗎

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檔案的相對路徑

';

#如

import '../mui/css/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中文網其他相關文章！