Mint-ui 移动端前端框架 vue

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