从品牌网站建设到网络营销策划,从策略到执行的一站式服务
小编给大家分享一下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的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图