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 的使用方法介绍。如果在使用的过程中遇到任何问题，或者是想给我们一些建议，欢迎大家去 GitHub 仓库提 issue。
可能有些同学知道，除了这个移动端组件库以外，饿了么还有一套桌面端组件库vue-desktop。目前我们正在对它进行重构，这次有了 UED 的介入，整体视觉有了很大的提升。完成后也会开源，而且会有两个版本，分别支持 vue 1.0.x 和 vue 2.0。当然，Mint UI 也会考虑支持 vue 2.0。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。