栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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的详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/76143.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号