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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
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
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
python daemon守护进程实现
2016/08/27 Python
OpenCV实现人脸识别
2017/04/07 Python
SVM基本概念及Python实现代码
2017/12/27 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
python speech模块的使用方法
2020/09/09 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
高三历史教学反思
2014/01/09 职场文书
党章培训心得体会
2014/09/04 职场文书
企业党员个人自我评价
2014/09/20 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python