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

然后在 .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 的使用方法介绍。如果在使用的过程中遇到任何问题，或者是想给我们一些建议，欢迎大家去 GitHub 仓库提 issue。

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