Mint UI组件库基本使用

一、介绍

• 基于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提供的配置对象参数进行配置，调用例外提供的方法等。