小编给大家分享一下vue前端框架中Mint UI的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

10年积累的成都网站设计、做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有常德免费网站建设让你可以放心的选择与我们合作。

一、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的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

文章标题：vue前端框架中MintUI的示例分析-创新互联
转载来源：http://cdweb.net/article/dgsisd.html