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