vue学习十：基于 Vue.js 的移动端组件库Mint-UI的学习

Mint-UI官方文档

安装：

# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S

在main.js导入所有的 MIntUI 组件：

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

按钮组件的使用（CSS Components）

在main.js导入按钮组件：

// 按需导入 Mint-UI组件
import { Button } from 'mint-ui'
// 使用 Vue.component 注册 按钮组件
Vue.component(Button.name, Button)

在App.vue中使用按钮组件：

    <mt-button type="danger" icon="more">default</mt-button>
    <hr>

    <mt-button type="danger" size="large" plain>default</mt-button>
    <hr>

    <mt-button type="danger" size="small" disabled>default</mt-button>
    &nbsp&nbsp
    <button type="button" class="mui-btn mui-btn-royal">
      紫色
    </button>
    <hr>

为什么叫做 mt-button 的 button 直接就能用，因为在main.js中通过Vue.use(MintUI)方法将MintUI里面的所有组件注册为了全局组件

Toast组件的使用（JavaScript Components）

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

按需导入 Toast 组件：

import { Toast } from "mint-ui";

给前面的mt-button绑定一个click事件：

<mt-button type="danger" icon="more" @click="show">default</mt-button>

因为Toast是js组件，需要在组件的script中去添加Toast函数

  data() {
    return {
      toastInstanse: null
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      // 模拟获取列表的 一个 AJax 方法
      // 在获取数据之前，立即 弹出 Toast 提示用户，正在加载数据
      this.show();
      setTimeout(() => {
        //  当 3 秒过后，数据获取回来了，要把 Toast 移除
        this.toastInstanse.close();
      }, 3000);
    },
    show() {
      // Toast("提示信息");
      // Toast({
      //   message: "这是消息",
      //   duration: 1500, // 如果是 -1 则弹出之后不消失
      //   position: "top",
      //   iconClass: "glyphicon glyphicon-heart", // 设置 图标的类(要自己去找)
      //   className: "mytoast" // 自定义Toast的样式，需要自己提供一个类名
      // });

      this.toastInstanse = Toast({
        message: "这是消息",
        duration: -1, // 如果是 -1 则弹出之后不消失
        position: "top",
        iconClass: "glyphicon glyphicon-heart", // 设置 图标的类(要自己去找)
        className: "mytoast" // 自定义Toast的样式，需要自己提供一个类名
      });

      // setTimeout(() => {
      //   this.toastInstanse.close();
      // }, 2000);
    }
  }

消息提示框的样式

可以定义一个全局使用的样式表

.mytoast i{
  color:red !important;
}

Mint-UI的按需导入组件

前面我们是完整引入了Mint-UI组件，但是这样会导致项目体积过大

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

如果只希望引入部分组件，比如 Button，那么需要在 main.js 中写入以下内容：

import { Button } from 'mint-ui'
Vue.component(Button.name, Button)

补充：MUI

MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap； 而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的 成套的组件，可以无缝的和 VUE项目进行集成开发；

从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件；

从体验上来说， MUI和Bootstrap类似；

理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目；

MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用；

下载地址