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 鼠标点击事件及其它捕获
Jun 04 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
javascript实现弹出层效果
Dec 10 Javascript
JS实现吸顶特效
Jan 08 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 引用是个坏习惯
2010/03/12 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
php编程每天必学之验证码
2016/03/03 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
python 测试实现方法
2008/12/24 Python
用Python编写web API的教程
2015/04/30 Python
Django框架多表查询实例分析
2018/07/04 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
英语专业毕业生自荐信范文
2013/12/31 职场文书
护理专业自我鉴定
2014/01/30 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
个人合伙协议书范本
2014/10/14 职场文书
股东授权委托书
2014/10/15 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python