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