Mint-UI

Mint-UI 是基于 Vue.js 的移动端组件库。

Mint-UI 官网： http://mint-ui.github.io/docs/#/zh-cn2/quickstart

Mint-UI 使用步骤：

安装：npm i mint-ui
导入 Minit-UI

导入所有的 MintUI 组件

import Vue from 'vue'
// 导入 Minit-UI
import MintUI from 'mint-ui' // 导入所有组件
// 这里可以忽略 node_modules 这一层目录
import 'mint-ui/lib/style.css'
// 将 MintUI 安装到Vue
Vue.use(MintUI) //把所有组件注册为全局的组件

使用组件库

Mint-UI 中 Toast 组件的使用

Toast 组件用于展示简短的消息提示框，支持自定义位置、持续时间和样式。

// 项目的入口文件
import Vue from 'vue'
// 导入 Minit-UI
import MintUI from 'mint-ui'// 导入所有组件
// 这里可以忽略 node_modules 这一层目录
import 'mint-ui/lib/style.css'

import app from './app.vue'
// 将 MintUI 安装到Vue
Vue.use(MintUI) //把所有组件注册为全局的组件 

// 导入 bootstrap 样式 
import 'bootstrap/dist/css/bootstrap.css' 
import './css/app.css'

var vm = new Vue({
    el: '#app',
    render: c => c(app),
    router // 4. 将路由对象挂载到 vm 上
})

app.js

<template>
    <div>
        <h1>这是 App 组件</h1>
        <mt-button type="danger" @click="show">default</mt-button>
    </div>
</template>
<script>
import { Toast } from 'mint-ui'
export default {
    data() {
        return {
            toastInstance: null
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList(){
            // 模拟获取列表的一个 AJAX 方法
            this.show()
            setTimeout(() => {
                this.toastInstance.close()
            }, 3000)
        },
        show() {
            this.toastInstance = Toast({
                message: '加载列表中',
                duration: -1,
                position: 'top',
                iconClass: 'glyphicon glyphicon-heart',
                className: 'mytoast'
            })
        }
    }
}
</script>
<style>
</style>

app.css

.mytoast i{
    color: red;
}

运行结果

这个案例模拟了，当界面刚打开，处于异步加载后台数据的过程中，如何呈现加载提示框直到数据加载完成。
有关 toast 的用法，参考官网解释的很详细。

Mint-UI 按需导入组件

按需导入可以减少 webpack 打包编译过程的工作量，使得打包后的 bundle.js 的体积更小。我们现在就来尝试下。

按需导入组件步骤：（官网为我们提供了按需导入的方法）

安装 babel-plugin-component 插件：
npm install babel-plugin-component -D
修改 .babelrc 配置文件

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-runtime",
        ["component",
            [{
              "libraryName": "mint-ui",
              "style": true
            }]
        ]
    ]
}

main.js 中按需导入部分代码

// 项目的入口文件
import Vue from 'vue'

// 按需导入 Mint-UI 组件
import { Button } from 'mint-ui'
// 使用 Vue.component 注册按钮组件
Vue.component(Button.name,Button)
// Button.name 就是全局变量：mt-button
import app from './app.vue'

// 导入 bootstrap 样式 
import 'bootstrap/dist/css/bootstrap.css' 
import './css/app.css'

var vm = new Vue({
    el: '#app',
    render: c => c(app),
    router // 4. 将路由对象挂载到 vm 上
})

导入后运行却发现报错了：

运行报错
这是怎么回事呢？猜想很可能和 babel@7 不兼容的问题。果然babel 官网告诉我们 babel@7+ 版本不支持配置数组形式了。

image.png

按照官网的提示，我们重新改一下配置，.babelrc 配置文件变成下面这个样子，导入的组件使用对象来描述。

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-runtime",
        ["component",
            {
              "libraryName": "mint-ui",
              "style": true
            }
        ]
    ]
}

果然，就可以正常运行啦~~~

我们来对比下导入所有和按需导入的配置方式，打包的 bundle.js 文件的大小，可以看到还是有差距滴。所以建议还是按需导入。

导入所有

按需导入

MUI

注意： MUI 不同与 Mint-UI，MUI只是开发出来的一套好的代码片段，里面提供了配套的样式、配套的 HTML 代码段，类似于 Bootstrap；而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的成套的组件，可以无缝的和 Vue 项目进行集成开发。体验上，MUI 和 Bootstrap 类似；理论上，任何项目都可以使用 MUI 或 Bootstrap。但是，Mint-UI 只适用于 Vue 项目。

使用方法：