vuejs使用mint-ui和mui组件

目录

• 1 Mint-UI
  • 1.1 全部导入组件
  • 1.2 CSS示例使用按钮
  • 1.3 JS示例使用toast
  • 1.4 按需导入
• 2 MUI
  • 2.1 MUI简介
  • 2.2 使用

1 Mint-UI

饿了么组件Mint-UI：Github 仓储地址，Mint-UI官方文档

1.1 全部导入组件

导入依赖：npm install mint-ui -S
页面引入

// 全部引入
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);

当全局安装后，对于CSS不用在导入了可以直接拿来使用，对于那些说明了还需要导入的则需要在组件内在导入下

1.2 CSS示例使用按钮

// 全部引入
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);

单页面vue文件

<template>
  <div>
    <h1>这是 App 组件</h1>

    <!-- 这里叫做 mt-button 的 button 直接就能用 -->
    <!-- import Mint from 'mint-ui' 是把所有组件都拿过来了，这步Vue.use(Mint);把组件注册为全局组件了 -->
    <mt-button type="danger" icon="more" @click="show">default</mt-button>
    <mt-button type="danger" size="large" plain>default</mt-button>
    <mt-button type="danger" size="small" disabled>default</mt-button>

    <button type="button" class="mui-btn mui-btn-royal">
      紫色
    </button>
    <!-- <mybtn type="primary">12345</mybtn> -->

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

    <router-view></router-view>
  </div>
</template>

注意：此处是在main.js内引入的相关包，那么也可以在当前需要使用的组件内的script脚本内引入

1.3 JS示例使用toast

简短的消息提示框，支持自定义位置、持续时间和样式
在当前的组件内导入后在使用toast，否则报错
在js部分都是模块作用域，如果需要使用就必须引入
页面部分

<template>
  <div>
    <h1>这是 App 组件</h1>
    <mt-button type="danger" icon="more" @click="show">default</mt-button>
  </div>
</template>

js部分

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

.mytoast i{
  color:red !important;
}

CSS中提升优先级属性!important：提升指定样式规则的应用优先权，即!important为开发者提供了一个增加样式权重的方法，让浏览器首选执行这个语句，!important不是不重要的意思，而是重要的意思(!感叹号在这里并不表示 非)

1.4 按需导入

需要引入相关依赖：npm install babel-plugin-component -D
修改.babelrc

"plugins": ["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]

页面引入部分

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

2 MUI

2.1 MUI简介

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

因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件；从体验上来说， MUI和Bootstrap类似
理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目；

MUI官网首页
MUI文档地址

2.2 使用

MUI 并不能使用npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用，在下载后的包文件中，主要在examples中找例子，把dist目录放入到项目中去
解压后的MUI包：

把dist放入项目中的目录lib文件夹中去，此处的lib主要是用来存放第三方引用的不能npm导入的包

在main.js中引入MUI样式

// 导入 MUI 的样式表， 和 Bootstrap 用法没有差别
import './lib/mui/css/mui.min.css'