Mint-ui 移动端前端框架 vue

• Z时代
• 2024-01-10
• 分类：综合

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

以上是 Mint-ui 移动端前端框架 vue 的全部内容， 来源链接： utcz.com/z/375056.html