频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
基于vue的前端框架的MintUI(更适用于移动端)安装教程
2018-05-15 11:39:44      个评论    来源:zeternityyt的博客  
收藏   我要投稿

一、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官方文档:https://mint-ui.github.io/#!/zh-cn

通过以上的两个示例可以看到,使用mintUI的用户交互界面要友好很多,在基于vue开发app的时候可以考虑使用这个前端UI框架。

点击复制链接 与好友分享!回本站首页
上一篇:ionic的安装及使用讲解
下一篇:WebAPI基础学习之location中的跳转方法
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站