Mint UI 基于 Vue.js 移动端组件库


Posted in Javascript onNovember 07, 2017

官网地址 http://mint-ui.github.io/

Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。

真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。

考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。

依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 100+ K。

Mint UI 基于 Vue.js 移动端组件库

Mint UI

GitHub:https://github.com/ElemeFE/mint-ui

项目主页:http://mint-ui.github.io/#!/zh-cn

Demo:http://elemefe.github.io/mint-ui/#!/

文档:http://mint-ui.github.io/docs/#!/zh-cn

由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库。自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了部分组件,于本周发布了 0.2.0 版本。本文介绍如何从零开始构建一个使用 Mint UI 的 Vue 项目。

脚手架

随着 Vue.js 的迅速发展,目前搭建一个 Vue 项目的脚手架已经有不少选择了。比如可以使用官方提供的 vue-cli。本文使用饿了么自己的构建工具 cooking 来完成这个任务。

首先,全局安装 cooking:

npm i cooking -g

新建项目文件夹:

mkdir mint-ui-example

进入项目文件夹,使用 cooking 进行构建:

cooking init vue

最后的参数 vue 表示构建的是基于 Vue.js 的脚手架。

在构建过程中,cooking 需要如下一些参数:

Mint UI 基于 Vue.js 移动端组件库

其中“使用何种 CSS 预处理”这里选择的是 Salad,它是一套基于 PostCSS 的解决方案,有兴趣的同学可以了解一下。当然,你也可以选择其他的预处理器。

完成构建后的项目结构为:

Mint UI 基于 Vue.js 移动端组件库

接下来安装 Mint UI:

npm i mint-ui --save

引入 Mint UI

好了,之后的工作可以分为两种情况:

1. 引入全部组件

如果你的项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中:

import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(MintUI);

2. 按需引入

如果你只需要使用某个组件,可以仅引入这个组件,Mint UI 能够保证在代码打包时,与这个组件无关的文件不会出现在最终代码里。比如需要引入 Button 组件,则在 main.js 中:

import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';
Vue.component(Button.name, Button);

可以看出,上面两种引入方法都要单独引入相应的 CSS 文件。这很不方便,尤其当你使用按需引入的方法引入多个组件时。为了避免这个问题,可以使用 babel-plugin-component 插件。首先当然是安装它:

npm i babel-plugin-component -D

然后在 .babelrc 中配置它:

{
 "plugins": ["other-plugin", ["component", [
 { "libraryName": "mint-ui", "style": true }
 ]]]
}

这样上述两种引入方法就可以简化为:

import MintUI from 'mint-ui';
Vue.use(MintUI);

import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);

插件会自动引入相应的 CSS 文件。

使用

每个组件的使用方法请阅读文档,这里只举一个微小的例子。在 app.vue 中:

<template>
 <h1>mint-ui-example</h1>
 <mt-button
 type="primary"
 @click="sheetVisible = true">
 选择操作
 </mt-button>
 <mt-actionsheet
 cancel-text=""
 :actions="actions"
 :visible.sync="sheetVisible">
 </mt-actionsheet>
</template>
<script>
 import { Toast, MessageBox } from 'mint-ui';
 export default {
 name: 'app',
 data() {
 return {
 sheetVisible: false,
 actions: [{
 name: '展示 Toast',
 method: this.showToast
 }, {
 name: '展示 Message Box',
 method: this.showMsgbox
 }]
 };
 },
 methods: {
 showToast() {
 Toast('这是一个 Toast');
 },
 showMsgbox() {
 MessageBox('提示', '这是一个 Message Box');
 }
 }
 };
</script>

则会得到如下页面:

Mint UI 基于 Vue.js 移动端组件库

预告

以上就是 Mint UI 的使用方法介绍。如果在使用的过程中遇到任何问题,或者是想给我们一些建议,欢迎大家去 GitHub 仓库提 issue。

可能有些同学知道,除了这个移动端组件库以外,饿了么还有一套桌面端组件库 vue-desktop。目前我们正在对它进行重构,这次有了 UED 的介入,整体视觉有了很大的提升。完成后也会开源,而且会有两个版本,分别支持 vue 1.0.x 和 vue 2.0。当然,Mint UI 也会考虑支持 vue 2.0。

PS: mint-ui在手机页面的样式不正常问题

 问题一、

在使用 vue2.0 +mint-ui 时pc端的样式没有问题但是手机端的就缩小了,失去了想要的效果

这是一个头文件的申明问题在入口文件index.html里的标签里加上这个代码即可

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

总结

以上所述是小编给大家介绍的Mint UI 基于 Vue.js 移动端组件库,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
vue中SPA单页面应用程序详解
Nov 07 #Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 #Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 #Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 #Javascript
vue 运用mock数据的示例代码
Nov 07 #Javascript
vue环境搭建简单教程
Nov 07 #Javascript
用Webpack构建Vue项目的实践
Nov 07 #Javascript
You might like
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
永不消失的title提示代码
2007/02/15 Javascript
判断脚本加载是否完成的方法
2009/05/26 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python实现获取操作系统版本信息方法
2015/04/08 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
关于人生的感言
2014/01/17 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
公司辞职信模板
2015/05/13 职场文书
民政局未婚证明
2015/06/15 职场文书
旅游投诉信范文
2015/07/02 职场文书
初二数学教学反思
2016/02/17 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python