vue前端框架—Mint UI详解(更适用于移动端)


Posted in Javascript onApril 30, 2019

一、mintUI简介

mint是一个基于vue的前端UI框架,而它的样式比较类似于手机的样式,可以说是一个基于vue打包app的UI框架,使用mint框架可以给使用vue打包的app的用户更好的交互体验。mint已支持vue2.0。

二、安装和引入mintUI    

在安装之前首先要对vue.js有所了解,有一个建立好的vue的项目以及安装好的node.js。

执行命令npm i mint-ui -S,出现以下界面代表安装成功。

vue前端框架—Mint UI详解(更适用于移动端)

引入muitUI:

在main.js中加入

import MintUI from 'mint-ui'

import 'mint-ui/lib/style.css'

Vue.use(MintUI)

注意:样式需要单独引入。这样引入可以引入全部的组件

如果不想引入全部组件,只想按需引入,则需要安装

npm install babel-plugin-component -D

修改.babeirc为:

vue前端框架—Mint UI详解(更适用于移动端)

然后import需要的组件就可以了

三、使用示例

1、提示信息toast

html:

vue前端框架—Mint UI详解(更适用于移动端)'

js:

vue前端框架—Mint UI详解(更适用于移动端)

在页面中的效果:

vue前端框架—Mint UI详解(更适用于移动端)

2、消息提示框

html:

vue前端框架—Mint UI详解(更适用于移动端)

js:

vue前端框架—Mint UI详解(更适用于移动端)

页面效果:

vue前端框架—Mint UI详解(更适用于移动端)

更多的示例和具体使用方法请看mintUI官方文档:http://mint-ui.github.io/#!/zh-cn

通过以上的两个示例可以看到,使用mintUI的用户交互界面要友好很多,在基于vue开发app的时候可以考虑使用这个前端UI框架。

以上所述是小编给大家介绍的vue前端框架—Mint UI的详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
JS 实现分页打印功能
May 16 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
jQuery实现视频展示效果
May 30 jQuery
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 #Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 #Javascript
TypeScript开发Node.js程序的方法
Apr 30 #Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 #Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 #Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 #Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 #Javascript
You might like
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
关于PHP开发的9条建议
2015/07/27 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
python测试驱动开发实例
2014/10/08 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
如何真正的了解python装饰器
2020/08/14 Python
医学护理毕业生自荐信
2013/11/07 职场文书
学习党课思想汇报
2013/12/29 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
python Django框架快速入门教程(后台管理)
2021/07/21 Python