Mint-UI
Mint-UI 是基于 Vue.js 的移动端组件库。
Mint-UI 官网： http://mint-ui.github.io/docs/#/zh-cn2/quickstart
Mint-UI 使用步骤：
- 安装：
npm i mint-ui - 导入 Minit-UI
- 导入所有的 MintUI 组件
import Vue from 'vue'
// 导入 Minit-UI
import MintUI from 'mint-ui' // 导入所有组件
// 这里可以忽略 node_modules 这一层目录
import 'mint-ui/lib/style.css'
// 将 MintUI 安装到Vue
Vue.use(MintUI) //把所有组件注册为全局的组件
- 使用组件库
Mint-UI 中 Toast 组件的使用
Toast 组件用于展示简短的消息提示框，支持自定义位置、持续时间和样式。
// 项目的入口文件
import Vue from 'vue'
// 导入 Minit-UI
import MintUI from 'mint-ui'// 导入所有组件
// 这里可以忽略 node_modules 这一层目录
import 'mint-ui/lib/style.css'
import app from './app.vue'
// 将 MintUI 安装到Vue
Vue.use(MintUI) //把所有组件注册为全局的组件
// 导入 bootstrap 样式
import 'bootstrap/dist/css/bootstrap.css'
import './css/app.css'
var vm = new Vue({
el: '#app',
render: c => c(app),
router // 4. 将路由对象挂载到 vm 上
})
app.js
<template>
<div>
<h1>这是 App 组件</h1>
<mt-button type="danger" @click="show">default</mt-button>
</div>
</template>
<script>
import { Toast } from 'mint-ui'
export default {
data() {
return {
toastInstance: null
}
},
created() {
this.getList()
},
methods: {
getList(){
// 模拟获取列表的一个 AJAX 方法
this.show()
setTimeout(() => {
this.toastInstance.close()
}, 3000)
},
show() {
this.toastInstance = Toast({
message: '加载列表中',
duration: -1,
position: 'top',
iconClass: 'glyphicon glyphicon-heart',
className: 'mytoast'
})
}
}
}
</script>
<style>
</style>
app.css
.mytoast i{
color: red;
}
运行结果
- 这个案例模拟了，当界面刚打开，处于异步加载后台数据的过程中，如何呈现加载提示框直到数据加载完成。
- 有关 toast 的用法，参考官网解释的很详细。
Mint-UI 按需导入组件
按需导入可以减少 webpack 打包编译过程的工作量，使得打包后的 bundle.js 的体积更小。我们现在就来尝试下。
按需导入组件步骤：（官网为我们提供了按需导入的方法）
- 安装 babel-plugin-component 插件：
npm install babel-plugin-component -D - 修改 .babelrc 配置文件
{
"presets": ["@babel/preset-env"],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-runtime",
["component",
[{
"libraryName": "mint-ui",
"style": true
}]
]
]
}
- main.js 中按需导入部分代码
// 项目的入口文件
import Vue from 'vue'
// 按需导入 Mint-UI 组件
import { Button } from 'mint-ui'
// 使用 Vue.component 注册按钮组件
Vue.component(Button.name,Button)
// Button.name 就是全局变量：mt-button
import app from './app.vue'
// 导入 bootstrap 样式
import 'bootstrap/dist/css/bootstrap.css'
import './css/app.css'
var vm = new Vue({
el: '#app',
render: c => c(app),
router // 4. 将路由对象挂载到 vm 上
})
导入后运行却发现报错了：
运行报错
这是怎么回事呢？猜想很可能和 babel@7 不兼容的问题。果然babel 官网告诉我们 babel@7+ 版本不支持配置数组形式了。
image.png
按照官网的提示，我们重新改一下配置，.babelrc 配置文件变成下面这个样子，导入的组件使用对象来描述。
{
"presets": ["@babel/preset-env"],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-runtime",
["component",
{
"libraryName": "mint-ui",
"style": true
}
]
]
}
果然，就可以正常运行啦~~~
我们来对比下导入所有和按需导入的配置方式，打包的 bundle.js 文件的大小，可以看到还是有差距滴。所以建议还是按需导入。
导入所有
按需导入
MUI
注意： MUI 不同与 Mint-UI，MUI只是开发出来的一套好的代码片段，里面提供了配套的样式、配套的 HTML 代码段，类似于 Bootstrap；而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的成套的组件，可以无缝的和 Vue 项目进行集成开发。体验上，MUI 和 Bootstrap 类似；理论上，任何项目都可以使用 MUI 或 Bootstrap。但是，Mint-UI 只适用于 Vue 项目。
使用方法：
- 下载 MUI：
git clone https://github.com/dcloudio/mui.git，并将 dist 文件中复制到 lib目录下。 - 导入 MUI 的样式表：
import './lib/mui/css/mui.min.css' - 找到 MUI 包目录
mui\examples\hello-mui\examples，根据官方提供的example 和 文档，尝试使用相关的组件。
