基于VUE.JS的移动端框架Mint UI的使用


Posted in Javascript onOctober 11, 2017

Mint UI

GitHub:github.com/ElemeFE/mint

项目主页:mint-ui.github.io/#

Demo:elemefe.github.io/mint-

文档:mint-ui.github.io/docs/#

由饿了么前端团队推出的 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 需要如下一些参数:

基于VUE.JS的移动端框架Mint UI的使用

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

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

基于VUE.JS的移动端框架Mint UI的使用

接下来安装 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>

则会得到如下页面:

基于VUE.JS的移动端框架Mint UI的使用

预告

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
国外的为初学者写的JavaScript教程
Jun 09 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
js查错流程归纳
May 04 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
JS delegate与live浅析
Dec 21 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
package.json配置文件构成详解
Aug 27 Javascript
jQuery中extend函数简单用法示例
Oct 11 #jQuery
vue中配置mint-ui报css错误问题的解决方法
Oct 11 #Javascript
node.js操作MongoDB的实例详解
Oct 11 #Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 #Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 #Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 #jQuery
AngularJS中下拉框的高级用法示例
Oct 11 #Javascript
You might like
最常用的8款PHP调试工具
2014/07/06 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
php实例化一个类的具体方法
2019/09/19 PHP
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
python实现简单的socket server实例
2015/04/29 Python
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
python之pandas用法大全
2018/03/13 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
应届生体育教师自荐信
2013/10/03 职场文书
商务英语专业自荐信
2013/10/14 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
初三开学计划书
2014/04/27 职场文书
日语专业求职信
2014/07/04 职场文书
施工安全责任书范本
2014/07/24 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
上学路上观后感
2015/06/16 职场文书