最接近原生APP体验的高性能前端框架
mui官方文档:https://dev.dcloud.net.cn/mui/
uniapp为mui的迭代产品,整合VUE框架,生态更好。
vue-awesome-mui
vue2.x中使用mui可以使用vue-awesome-mui
,GitHub地址:https://github.com/Wscats/vue-awesome-mui
安装
1 |
npm install vue-awesome-mui -save |
配置
main.js中挂载mui。
1 |
import mui from 'vue-awesome-mui' |
移动app项目,建议在index.html文件中添加如下meta标签:(若组件没有正常显示)
1 |
<!-- 可视宽度为device-width;首次显示缩放级别为1,即按设备尺寸显示无缩放;最大缩放级别为1,即禁止用户放大页面;是否可缩放设置为否 --> |
可在App.vue文件中进行mui配置,例如:
1 |
<script> |
使用
.vue文件中使用mui。
html元素中使用:
1 |
<header class="mui-bar mui-bar-nav"> |
JavaScript中使用:
1 |
var meta = respon.data.meta; |
引入时间选择器
vue-awesome-mui中并没有整合mui的时间选择器。要使用时间选择器还需要我们引入。
下载
下载时间选择器相关依赖文件:
1 |
//js文件 |
在assets文件夹下,新建一个muiext文件夹存放这些文件。
引入
main.js中引入。上边的配置,修改如下:
1 |
//mui组件(第三方封装) |
修改
修改mui.js
在node_modules文件夹下找到“vue-awesome-mui”,修改mui/dist/js/mui.js 和
mui.min.js
文件。在js文件最后添加:
1 |
window.mui = mui; |
使用
1 |
//默认,选择日期时间 |
扩展
关于optioins:
1 |
//var options = {"value":"2010-10-10 10:10","beginYear":2010,"endYear":2020}; |
show()的回调:
1 |
|
问题
遇到的问题:提示mui.picker.min.css中gradient的用法已过时。
解决方法:更正其用法,若不影响效果可将相关语句注释掉。