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

一、mintUI简介

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

二、安装和引入mintUI    

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

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

引入muitUI：

在main.js中加入

import MintUI from 'mint-ui'

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

Vue.use(MintUI)

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

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

npm install babel-plugin-component -D

修改.babeirc为：

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

三、使用示例

1、提示信息toast

html:

'

js:

在页面中的效果：

2、消息提示框

html:

js:

页面效果：

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

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

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

赞 (0)

相关推荐

  • vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)

    vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)

    本文介绍了vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动) 先去下载一个"省份.城市.区县.乡镇" 四级联动数据,然后 引入 import { Picker } from 'mint-ui'; //前提是npm install mint-ui -S Vue.component(Picker.name, Picker); 组件使用 <mt-picker :slots="addressSlots" class="picke

  • Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=

  • vue.js整合mint-ui里的轮播图实例代码

    vue.js整合mint-ui里的轮播图实例代码

    初始化vue项目 npm install -g vue-cli vue init webpack demo # 中间会让你选npm yarn 等来安装依赖,我选的是yarn,因为它快些 安装mint-ui yarn add mint-ui mint-ui装好了,还要配置一下babel,方法跟着mint-ui的官方文档来配置就可以了 下面是我配置好的 .babelrc 文件,启动的时候会报跟es2015相关的错,装一下 babel-preset-es2015 就好了 { "presets"

  • vue基于mint-ui的城市选择3级联动的示例

    vue基于mint-ui的城市选择3级联动的示例

    项目是基于 vue2 的移动端项目 1.实际效果 地址三级联动 mint-ui picker.png 2.首先你需要去下载一个包含中国省份,城市,区县的数据 如下: https://github.com/artiely/Administrative-divisions-of-China(里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的) 3.具体代码 主要是用到了mint-ui的picker组件,关于mint-ui的使用就自行看官网 Ⅰ .html组件 <div> <m

  • vue.js中mint-ui框架的使用方法

    vue.js中mint-ui框架的使用方法

    本文为大家分享了vue.js中mint-ui框架的使用方法,具体内容如下 1.安装vue2.0的mint-ui框架 npm install mint-ui -save 2.引用和使用框架,我用的是全部组件,也可以按需选择加载相应的组件,不过要使用babel-plugin-component import Mint from 'mint-ui'; Vue.use(Mint); 3.创建一个header.vue组件,里面写入mint-ui的头部组件 <template> <mt-header

  • vue基于mint-ui实现城市选择三级联动

    vue基于mint-ui实现城市选择三级联动

    项目是基于vue2 的移动端项目,供大家参考,具体内容如下 1.实际效果 地址三级联动 mint-ui picker.png 2.首先你需要去下载一个包含中国省份,城市,区县的数据 如下: (这个地址里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的) (一个更好的中国地区数据,推荐用这个) 3.具体代码 主要是用到了mint-ui的picker组件,关于mint-ui的使用就自行看官网 Ⅰ .html组件 <div> <mt-picker :slots="my

  • 详解Vue2.0配置mint-ui踩过的那些坑

    最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈,但是昨天开始配置开发环境的时候,遇到了各种报错,即使是按照两家的官方文档配置,也还是会报错,晚上下班后回去配置了一晚上,才终于把它配置好,所以就记录下来,以防后面再次踩坑.. vue.js介绍 Vue.js 是一个用于创建 web 交互界面的.其特点是 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单. 数据驱动 自动追踪依赖的模板表达式和计算属性. 组件化 用解耦.可复用的组件来构造界面. 轻量 ~2

  • 解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题

    解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题

    所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTopLoaded();和this.$refs.loadmore.onBottomLoaded(); 有效,其他的三个都无效,这两句话是意思是查询完要调用一次,用于重新定位 分析原因: 首先这四个模块都是用的 <mt-loadmore :top-method="loadTop" :bott

  • vue使用mint-ui实现下拉刷新和无限滚动的示例代码

    vue使用mint-ui实现下拉刷新和无限滚动的示例代码

    在开发web-app中,总会遇到v-for出来的li会有很多,当数据达几百上千条的时候,一起加载出来会造成用户体验很差的效果. 这时候我们可以使用无限滚动和下拉刷新来实现控制显示的数量,当刷新到底部的边界的时候会触发无限滚动的事件,再次加载一定数量的条目. 还是拿在项目中的功能来举栗子介绍. 有个列表,几千条数据,做分页查询,限制每次显示查询20条,每次拉到最后20条边缘的时候,触发无限滚动,这时候会出现加载图标,继续加载后续20条数据,加载到最后的时候会提示数据"加载完毕". 项目的

  • vue mint-ui学习笔记之picker的使用

    vue mint-ui学习笔记之picker的使用

    本文介绍了vue mint-ui picker的使用,分享给大家,也给自己留个学习笔记 Picker的使用 import { Picker } from 'mint-ui'; Vue.component(Picker.name, Picker); API 示例一:picker的简单使用 xxx.vue: <template> <div id="app"> <mt-picker :slots="slots" ></mt-pic

随机推荐