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项目；
2.2 使用
MUI 并不能使用npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用，在下载后的包文件中，主要在examples中找例子，把dist目录放入到项目中去
解压后的MUI包：
在这里插入图片描述
把
dist放入项目中的目录lib文件夹中去，此处的lib主要是用来存放第三方引用的不能npm导入的包
image.png
在main.js中引入MUI样式
// 导入 MUI 的样式表， 和 Bootstrap 用法没有差别
import './lib/mui/css/mui.min.css'
网友评论