9. Mint-UI 和 MUI

Mint-UI

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

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

Mint-UI 使用步骤：

1. 安装：npm i mint-ui
2. 导入 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) //把所有组件注册为全局的组件 

3. 使用组件库

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

app.css

.mytoast i{
    color: red;
}

运行结果

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

Mint-UI 按需导入组件

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

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

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

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

3. 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 项目。

使用方法：

1. 下载 MUI：git clone https://github.com/dcloudio/mui.git，并将 dist 文件中复制到 lib目录下。
2. 导入 MUI 的样式表：
   import './lib/mui/css/mui.min.css'
3. 找到 MUI 包目录 mui\examples\hello-mui\examples ，根据官方提供的example 和 文档，尝试使用相关的组件。