VUE中使用MUI方法


Posted in Javascript onFebruary 12, 2019

VUE中如何使用MUI

1、第一步:下载MUI

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

VUE中使用MUI方法

2、第二步:拷贝文件

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

若引入的mui.css报错,可能是mui中url会指向一些图片,将图片地址的单引号改为双引号就可以了。

VUE中使用MUI方法

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

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

import 'mui.css文件的相对路径';

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

VUE中使用MUI方法

4、第四步:选择需求样式效果

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

右键 > 查看网页源代码 > 复制相应代码(这个相应代码是你需要的样式的代码)

接下来以使用MUI的 卡片视图的第三个卡片(有图片有文字的那个) 为例

VUE中使用MUI方法

VUE中使用MUI方法

5、第五步:复制需求样式源码

点击卡片视图后,进入视图页面

右键鼠标 > 点击查看网页源代码 > 复制自己所要应用的代码 >将复制的代码粘贴到你所要使用的那个页面中

第三个卡片视图源码: 

<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中使用MUI方法

Javascript 相关文章推荐
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
关于Vue中的options选项
Mar 22 Vue.js
如何利用ES6进行Promise封装总结
Feb 11 #Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 #Javascript
Vue表单控件绑定图文详解
Feb 11 #Javascript
图文讲解vue的v-if使用方法
Feb 11 #Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 #Javascript
ES6 更易于继承的类语法的使用
Feb 11 #Javascript
总结4个方面优化Vue项目
Feb 11 #Javascript
You might like
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Python网络编程详解
2017/10/31 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Django choices下拉列表绑定实例
2020/03/13 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
上班睡觉检讨书
2014/01/09 职场文书
小学后勤管理制度
2014/01/14 职场文书
保险公司年会主持词
2014/03/22 职场文书
2014年班干部工作总结
2014/11/25 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
同学聚会通知书
2015/04/20 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技