mint-ui(基于 Vue.js 的移动端组件库)

IT教程 4年前 (2020) https://www.55wd.com

mint-ui

1.引入文件

引入全部组件

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

new Vue({
  el: '#app',
  components: { App }
})

解释:

import MintUi from 'mint-ui';// 把所有组件都导入进来
import 'mint-ui/lib/style.css';// 这里可以省略 node_modules 这层目录
Vue.use(MintUi);// 将 mint-ui 安装到 vue 中,把所有组件,注册为全局组件

按需引入部分组件(推荐,因为体积小)

  • 借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
  • 注意:按需导入,可能存在某些插件无法正常显示,此时就需要改为引入全部组件,或用其他 UI 框架
  • 安装命令:npm install babel-plugin-component -D
  • 然后,将 .babelrc 修改或是添加为:
    {
      "presets": [
        ["es2015", { "modules": false }]
      ],
      "plugins": [["component", [
        {
          "libraryName": "mint-ui",
          "style": true
        }
      ]]]
    }

上面出错可以试试下面的:

{
  "presets": [
    "env",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime",["component", [
      {
        "libraryName": "mint-ui",
        "style": true
      }
    ]]]
}
  • 最后在 main.js 中引入
import Vue from 'vue'
import App from './App.vue'

// 按需导入 mint-ui
import {Button, Cell} from 'mint-ui';
// 注册组件(引号中可自定义模板名称)
Vue.component('my-cell',Cell);
Vue.component(Button.name,Button);// 也可以这种的选择它的默认命名(推荐)

/* 或写为
 * Vue.use(Button)
 * Vue.use(Cell)
 */

new Vue({
  el: '#app',
  components: { App }
})

2.导入后的应用

类似 bootstrap ,例如在一级路由下使用:

  • css components

mint-ui(基于 Vue.js 的移动端组件库)

<template>
    <p>
        <h1>这是 App 组件!</h1>
        <!-- type 是类型, size 是尺寸 -->
        <mt-button type="danger" size="large">default</mt-button>
        
        <router-link to="/account">Account</router-link>
        <router-link to="/goodslist">GoodsList</router-link>

        <router-view></router-view>
    </p>
</template>
  • js components

mint-ui(基于 Vue.js 的移动端组件库)

<template>
    <p>
        <h1>这是 App 组件!</h1>
        <p class="panel">hihao</p>
        <!-- type 是类型, size 是尺寸 -->
        <mt-button type="danger" size="large">default</mt-button>

        <router-link to="/account">Account</router-link>
        <router-link to="/goodslist">GoodsList</router-link>

        <router-view></router-view>
    </p>
</template>
<script>
    // 按需导入 Toast 组件
    import {Toast} from 'mint-ui';

    export default {
        data() {
            return {
                toastClose: ''
            }
        },
        created() {
            this.getList();
        },
        methods: {
            getList() {
                // 模拟获取列表的一个 Ajax 方法
                // 在获取数据之前,立即弹出 Toast 提示用户,正在加载数据
                this.show();

                setTimeout(() => {
                    // 当 3 秒过后,数据获取回来了,要把 Toast 移除
                    this.toastClose.close();
                }, 3000)
            },
            show() {
                this.toastClose = Toast({
                    message: '加载中...', // 弹窗内容
                    position: 'top', // 显示位置
                    duration: -1, // 持续时间(-1 代表一直显示)
                    iconClass: '', // 设置图标的类(可用 bootstrap 中的字体图标)
                    className: 'red' // 自定义 Toast 的样式,需要自己提供一个类名
                });
            }
        }
    }
</script>
<style>
    .red {
        color: red !important;
    }
</style>

附加:

  1. 在 vue 事件中点击有 @click ,但是 mint-ui 中有个 @tap 也是点击事件,在手机端页面中点击失灵可以换为 @tap 试试(注意:@tap 仅在 mint-ui 中适用)

文章回顾

大家看了本文mint-ui(基于 Vue.js 的移动端组件库)的精彩教程资源内容,是不是对mint-ui(基于 Vue.js 的移动端组件库)了解更多,真心希望mint-ui(基于 Vue.js 的移动端组件库)能帮助到你, 小编会一直给你带来更多教程资源文章信息。

版权声明: 发表于 2020-01-14 18:42:47。

本文由第三方用户分享仅代表作者观点,不代表本网站立场,秉承互联网开放分享的精神,目的在于传递更多信息,加强各行业互通交流,但对内容不作任何保证或承诺,请读者自行参考斟酌。网站发布的信息(包含但不限于版式、图片、字体、文章等素材)由第三方用户分享,版权归原作者所有,本站不承担任何相关的版权纠纷等相关责任。如您认为本篇内容侵犯了您的权益,请与我们联系,我们会及时处理。

豌豆资源网专注分享全网综合资源网站大全,致力于超实用的内容资源搜索。

转载请注明:
本文标题:mint-ui(基于 Vue.js 的移动端组件库)
本文地址:https://55wd.com/s11151/