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的详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
利用Vite搭建Vue3+ElementUI-Plus项目的全过程
vue3如今已经成为默认版本了,相信大多数公司已经全面拥抱vue3了,下面这篇文章主要给大家介绍了关于利用Vite搭建Vue3+ElementUI-Plus项目的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07vue-resource + json-server模拟数据的方法
本篇文章主要介绍了vue-resource + json-server模拟数据的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-11-11搭建vue3项目以及按需引入element-ui框架组件全过程
element是基于vue.js框架开发的快速搭建前端的UI框架,下面这篇文章主要给大家介绍了关于搭建vue3项目以及按需引入element-ui框架组件的相关资料,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下2024-02-02
最新评论