扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下vue前端框架中Mint UI的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联专注于企业成都全网营销、网站重做改版、荆门网站定制设计、自适应品牌网站建设、HTML5、商城系统网站开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为荆门等各大城市提供网站开发制作服务。
一、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的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网