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 相关文章推荐
ECMAScript 创建自己的js类库
Nov 22 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
js改变Iframe中Src的方法
May 05 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
详解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
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
js实现选项卡效果
2020/03/07 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
python sort、sorted高级排序技巧
2014/11/21 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
python 拼接文件路径的方法
2018/10/23 Python
python的常用模块之collections模块详解
2018/12/06 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
python dumps和loads区别详解
2020/02/04 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
智利最大的网上商店:Linio智利
2016/11/24 全球购物
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
幼师专业毕业生自荐信
2013/09/29 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android