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 相关文章推荐
js实现简单模态窗口,背景灰显
Nov 14 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
如何利用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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
laravel自定义分页效果
2017/07/23 PHP
laravel model 两表联查示例
2019/10/24 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
Windows下为Python安装Matplotlib模块
2015/11/06 Python
python制作mysql数据迁移脚本
2019/01/01 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
python脚本第一行如何写
2020/08/30 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
机电专业毕业生求职信
2013/10/27 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
宣传标语大全
2014/07/01 职场文书
超市督导岗位职责
2015/04/10 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
Python的这些库,你知道多少?
2021/06/09 Python