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

npm i cooking -g

mkdir mint-ui-example

cooking init vue

npm i mint-ui --save

import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';

Vue.use(MintUI);

import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';

Vue.component(Button.name, Button);

npm i babel-plugin-component -D

{
 "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);

<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>