一, 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 框架.
来源: https://www.2cto.com/kf/201805/746192.html