##MSI 内部移动端 UI 组件库
####背景：
#####1、由于内部需求越来越多，在每次开启新项目的时候，在项目基建构建的时候会花费很多时间，并且 UI 现在逐步统一，具有自己公司的特色风采，急需一套公用的 UI 组件库来集成快速开发。

####按需引入方法：
**方式一. 自动按需引入组件 (推荐)**
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。
```
# 安装插件
npm i babel-plugin-import -D
```
```
// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "msi-mobile-ui",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'msi-mobile-ui',
      libraryDirectory: 'es',
      style: true
    }, 'msi-mobile-ui']
  ]
};
```


<br>
####更改的组件：

**<font color="navy">（1）Button 按钮组件</font>**
#####改动的点：
| 属性      | 说明 |
| ----------- | ----------- |
| type      | 当 type 属性为 primary 时，背景色改为 <font color=#269BFF>#269BFF</font> ，原有的是（<font color=#1989fa>#1989fa</font>）  |
| round      | 当按钮设置 round 属性时（圆形按钮），border-radius 为 6px，原有的是（999px）  |
| disabled      | 当按钮设置 disabled 属性时（禁用按钮），opacity 为 0.4，原有的是（0.5）  |

<br>
**<font color="navy">（2）Field 输入框</font>**
#####改动的点：
| 属性/CSS      | 说明 |
| ----------- | ----------- |
| van-cell      | 原有的 van-cell class 样式 `padding` 为 10px 16px，改为  13.5px 16px|

<br>
**<font color="navy">（3）Uploader 文件上传</font>**
#####改动的点：
| 插槽      | 说明 |
| ----------- | ----------- |
| slot 和  preview-cover    | 自定义属性 msi ， 如果设置 msi 属性，默认自定义为 msi 内部的 UI 原型，并且一定要设置 max-count 属性 |