MintUI 组件
安装Mint UI
npm install --save mint-ui
- 导入所有MintUI组件:
import MintUI from 'mint-ui'
- 导入样式表:这里 可以省略 node_modules 这一层目录
import 'mint-ui/lib/style.css'
- 在 vue 中使用 MintUI:把所有的组件,注册为全局的组件
Vue.use(MintUI)
- 使用的例子:
css组件
<mt-button type="primary" size="large">primary</mt-button>
js组件
<script>
// 按需导入 Toast 组件
import { Toast } from "mint-ui";
export default {
data() {
return {
// 文档里 Toast()函数有一个默认返回值(含有close方法),放在data中的toastInstanse里。
toastInstanse: null
};
},
//组件被创建之后,就调用这个函数
created() {
this.getList();
},
methods: {
getList() {
// 模拟获取列表的 一个 AJax 方法
// 在获取数据之前,立即 弹出 Toast 提示用户,正在加载数据
this.show();
// 不用setTimeout(function()原因如下:
//setTimeout传入的这个方法内部的this会被改写指向window
//箭头函数会改变this的指向,箭头函数内部的this会指向声明箭头函数时所在作用域的this
setTimeout(() => {
// 让某个方法延迟执行, 当 3 秒过后,数据获取回来了,要把 Toast 移除
this.toastInstanse.close();
}, 3000);
},
show() {
this.toastInstanse = Toast({
message: "这是提示消息--正在加载数据",
duration: -1, // 如果是 -1 则弹出之后不消失
position: "top",
// 设置 图标的类,图标从bootstrap找
// 导入bootstrap样式 import 'bootstrap/dist/css/bootstrap.css'
iconClass: "glyphicon glyphicon-heart",
// 自定义Toast的样式,需要自己提供一个类名
// import './css/app.css'
// 类里面 .mytoast i{color:red !important;} //若只让图标有样式,图标默认被包裹在i里
className: "mytoast"
});
}
}
};
</script>
按需导入MintUI 组件
-
安装babel-plugin-component:
npm install babel-plugin-component -D -
将.babelrc修改为:
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime", ["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
import { Button } from 'mint-ui'
Vue.component(Button.name, Button)
// Button.name的值是mt-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 上,下载现成的包,自己解压出来,然后手动拷贝到项目中使用;
- 导入 MUI 的样式表:
解压出来后把里面的dist文件放在项目里src中的lib 中,并改名为mui。
查找样式。mui-master包中–>examples–>hello-mui—>examples—>找到需要的样式复制代码,或者在文档里找
import '../lib/mui/css/mui.min.css'
- 在
webpack.config.js
中添加新的loader规则:
{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }
- 根据官方提供的文档和example,尝试使用相关的组件