一、介绍
- 基于Vue.js的移动端组件库
- bootstrap，只是开发出来的一套好用的代码片段，里面提供了配套的的样式、配套的html代码等；Mint-UI，是真正的组件库，用Vue封装出来的成套组件，可以无缝和Vue项目进行集成开发，也只适用于Vue项目（bootstrap、MUI等可用于任何项目）。
- 官方API
- 官方已经不维护了，这里当作学习用
二、安装
1、npm安装，能更好地和 webpack 打包工具配合使用。
// 安装
//Vue 1.x
npm install mint-ui@1 -S
//Vue 2.0
npm install mint-ui -S
（我用的是vue3，经测试也可以用，已经不维护了，当作学习用）
2、直接CDN引入
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
三、引入
在main.js 的JS入口文件中引入。
1、引入全部组件
import Vue from 'vue' //需要先引入Vue
import MintUI from 'mint-ui' //引入Mint-UI
import 'mint-ui/lib/style.css' //引入Mint-UI的样式
import App from './App.vue'
Vue.use(MintUI) //安装到Vue中去
new Vue({
el: '#app',
components: { App } //注册组件
})
体积会较大。
2、按需导入部分组件
借助babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
npm install babel-plugin-component -D安装。
修改增加.babelrc配置。
{
"plugins": [["component",
{
"libraryName": "mint-ui",
"style": true
}
]]
}
则可以main.js进行按需导入组件。
import { Cell, Checklist } from 'minu-ui'; //相当于导入了组件模板对象
Vue.component(Cell.name, Cell); //通过组件模板对象注册为组件，组件名可自定义（之后通过标签引入此组件的标签名）
//如果Cell.name的写法，即还是为官方提供的组件名称
Vue.component(Checklist.name, Checklist);
/* 或写为
* Vue.use(Button)
* Vue.use(Cell)
*/
可以查看对应组件API，有对应的导入方式。
更推荐部分引入。
四、基本使用
主要分3类。有JS功能的组件；单纯的CSS样式的组件；表单相关的组件。
1、使用CSS组件
例如使用按钮组件，打开对应的API。
会有介绍，引入方式（如果引入了全部的Mint-UI组件则可以不用部分引入），后面就是各种按钮的例子。
<mt-button type="default">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button>
根据API使用，主要标签引入组件，属性改变样式等。
2、JS组件
例如Toast提示组件，打开对应API。
会有介绍，引入方式、例子。
//简单使用
Toast('提示信息');
//传入对象进行更多配置
Toast({
message: '提示',
position: 'bottom',
duration: 5000
});
根据API提供的配置对象参数进行配置，调用例外提供的方法等。
