# Vue 第七天学习

Mint-UI 学习

MUI

# Mint-UI

# 基于 Vue.js 的移动端组件库

特性介绍：Mint-UI 官网

1. Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。
2. 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。
3. 考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。
4. 依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有～30kb (JS + CSS) gzip。

安装：

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

来自官网：

// 引入全部组件
import Vue from "vue";
import Mint from "mint-ui";
Vue.use(Mint);
// 按需引入部分组件
import { Cell, Checklist } from "minu-ui";
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

# 项目演示：

项目目录：

main.js:

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

//导入所以的 MintUI 组件
//导入 mint-ui
import MintUI from "mint-ui"; //把所有的组件都导入进来
//这里可以 省略 node_modules 目录
import "mint-ui/lib/style.css";

Vue.use(MintUI); //把所有的组件，注册为全局的组件

//导入app组件
import app from "./App.vue";
//导入 自定义路由模块
import router from "./router.js";

let vm = new Vue({
  el: "#app",
  data: {
    msg: "123",
  },
  render: (c) => c(app),
  router,
});

App.vue:

<template>
  <div>
    <h1>这是app组件</h1>
    <mt-button type="primary" size="large">default</mt-button>
    <router-link to="/account">account</router-link>
    <router-link to="/goodslist">goodslist</router-link>
    <router-view></router-view>
  </div>
</template>

<script></script>

<style></style>

# JS components 使用

# 例如：使用 Toast 组件

App.vue:

<template>
  <div>
    <h1>这是app组件</h1>
    <mt-button type="primary" size="large" @click="show">default</mt-button>
    <router-link to="/account">account</router-link>
    <router-link to="/goodslist">goodslist</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import { Toast } from "mint-ui";

export default {
  data() {
    return {};
  },
  methods: {
    show() {
      Toast({
        message: "Upload Complete",
        position: "middle",
        duration: 5000,
      });
    },
  },
};
</script>

<style></style>

# 使用 bootstrap 图标 配合 **Toast 组件 ** 使用

1. 安装 bootstrap 包

npm i bootstrap@3.3.7 -S

2. 在 main.js 文件

import "bootstrap/dist/css/bootstrap.min.css";

3. 在 App.vue 文件里

# 自定义图标颜色

# 模拟 完成接收数据 Toast 组件消失需求

# 需求： 1s 后 Toast 组件消失需求

App.vue:

<template>
  <div>
    <h1>这是app组件</h1>
    <mt-button type="primary" size="large" @click="show">default</mt-button>
    <router-link to="/account">account</router-link>
    <router-link to="/goodslist">goodslist</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      instance: null,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.show();
      setTimeout(() => {
        this.instance.close();
      }, 1000);
    },
    show() {
      this.instance = Toast({
        message: "Upload Complete",
        duration: -1,
        position: "middle",
        duration: 5000,
        iconClass: "glyphicon glyphicon-heart",
        className: "mytoast",
      });
    },
  },
};
</script>

<style></style>

# babel-plugin-component 插件

作用：为了项目整体内容不过于庞大，按需加载是许多第三方的库和插件必不可少的，于是使用了官方提供的按需加载插件 babel-plugin-component

# 按需导入：

1. 1. 安装：

npm install babel-plugin-component -D

2. 2. 修改 .babelrc 里面的 plugins ：

{
  "presets": ["env", "stage-0"],
  "plugins": [
    "transform-runtime",
    [
      "component",
      [
        {
          "libraryName": "mint-ui",
          "style": true
        }
      ]
    ]
  ]
}

# 项目改造

# 按需导入

mian.js:

import "mint-ui/lib/style.css";

//按需导入
import { Button } from "mint-ui";
Vue.component("mybtn", Button); //导入自定义的 mybtn 按钮组件

App.vue:

<template>
    <div>
        <h1>这是app组件</h1>
        <mybtn type="primary">mybtn</mybtn>
        <router-link to="/account">account</router-link>
        <router-link to="/goodslist">goodslist</router-link>
        <router-view></router-view>
    </div>
</templat

# MUI

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

**mui 框架：** 性能和体验的差距，一直是 mobile app 开发者放弃 HTML5 的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让 HTML5 开发者倍感挫败，尤其拿到 Android 低端机运行，摔手机的心都有； 另一方面，浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的 ui 框架但性能低下。

mui 框架有效的解决了这些问题，这是一个可以方便开发出高性能 App 的框架，也是目前最接近原生 App 效果的框架。

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

1. 下载 MUI 包 从 github 上

# 使用：

在 main.js 导入 MUI 包:

import "./lib/dist/css/mui.min.css";

在 App.vue 中使用（例如一个 按钮）：

<button type="button" class="mui-btn mui-btn-royal">
  Badge button <span class="mui-badge mui-badge-royal">999</span>
</button>