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问题整理
Aug 16 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
JavaScript实现答题评分功能页面
Jun 24 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/02/16 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
JQuery 风格的HTML文本转义
2009/07/01 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
Javascript缓存API
2016/06/14 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
python 网络爬虫初级实现代码
2016/02/27 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
业务经理的岗位职责
2013/11/16 职场文书
《散步》教学反思
2014/03/02 职场文书
党建目标管理责任书
2014/07/25 职场文书
县委务虚会发言材料
2014/10/20 职场文书
初中同学会致辞
2015/08/01 职场文书
初二英语教学反思
2016/02/15 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
用python画城市轮播地图
2021/05/28 Python
Go timer如何调度
2021/06/09 Golang