如何在VUE使用MUI

1.第一步：下载MUI

百度搜索MUI进入官网，点击右上角github地址下载MUI文件

2.第二步：复制文件

将下载文件的dist目录中的三个文件复制到您自己的项目中创建的mui目录中。

如果导入的mui.css报错，可能是mui中的url会指向某些图片，所以只需将图片地址的单引号改为双引号即可。

3.第三步：介绍MUI风格

在main.js文件中，引入了mui风格

导入“mui.css文件的相对路径”；

例如“进口”./mui/CSS/mui . CSS '；

4.第四步：选择需求风格效果

运行mui-master examples hello-mui index.html文件

右击网页源代码，复制相应的代码(这个相应的代码就是你需要的样式的代码)

接下来，以使用MUI的卡片视图的第三张卡片(有图片和文本的那张)为例

5.第五步：复制需求风格的源代码

单击卡片视图进入查看页面

右键单击可查看网页源代码，复制要应用的代码，并将复制的代码粘贴到要使用的页面中

第三张卡片视图源代码：

div class=' mui-card ' div class=' mui-card-header mui-card-media ' style=' height :40 VW；背景-图像：url(./images/CBD . jpg)'/div div class=' mui-card-content ' div class=' mui-card-content-inner '反对日期：2016年1月18日/PP style=' color : # 333；这里显示的文章摘要让读者大致了解文章内容./p/div/div class=' mui-card-footer ' a class=' mui-card-link ' like/aa class=' mui-card-link '阅读更多/a/div/div