基于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 相关文章推荐
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
vue之nextTick全面解析
May 17 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 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
10条PHP高级技巧[修正版]
2011/08/02 PHP
openPNE常用方法分享
2011/11/29 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
用javascript实现画板的代码
2007/09/05 Javascript
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
Python中join函数简单代码示例
2018/01/09 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
如何执行一个shell程序
2012/11/23 面试题
舞蹈教师自荐信
2014/01/27 职场文书
市场营销求职信范文
2014/02/21 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
sql server 累计求和实现代码
2022/02/28 SQL Server