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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
5款Javascript颜色选择器
Oct 25 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
jquery图形密码实现方法
Mar 11 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 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
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
php 多文件上传的实现实例
2016/10/23 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
模仿百度三维地图的js数据分享
2011/05/12 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
python实现中文文本分句的例子
2019/07/15 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
仓库管理制度
2014/01/21 职场文书
合作意向书
2014/07/30 职场文书
员工工作自我评价
2014/09/26 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
建议书的格式及范文
2015/09/14 职场文书
2016党校学习心得体会
2016/01/07 职场文书
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python