https://zhuanlan.zhihu.com/p/21802181
先按装vue脚手架:vue-cli
安装mint-ui
npm i mint-ui --save
安装 babel-plugin-component
npm i babel-plugin-component --save
然后在 .babelrc 中配置它:
{
"plugins": ["other-plugin", ["component", [ { "libraryName": "mint-ui", "style": true } ]]] }
引入方法1:【全部引入】
import MintUI from 'mint-ui'; Vue.use(MintUI);
引入方法1:【局部引入】
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>
https://zhuanlan.zhihu.com/p/21802181