##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']
]
};
####更改的组件：
（1）Button 按钮组件 #####改动的点：
| 属性 | 说明 |
|---|---|
| type | 当 type 属性为 primary 时，背景色改为 #269BFF ，原有的是（#1989fa） |
| round | 当按钮设置 round 属性时（圆形按钮），border-radius 为 6px，原有的是（999px） |
| disabled | 当按钮设置 disabled 属性时（禁用按钮），opacity 为 0.4，原有的是（0.5） |
**（2）Field 输入框** #####改动的点： | 属性/CSS | 说明 | | ----------- | ----------- | | van-cell | 原有的 van-cell class 样式 `padding` 为 10px 16px，改为 13.5px 16px|
**（3）Uploader 文件上传** #####改动的点： | 插槽 | 说明 | | ----------- | ----------- | | slot 和 preview-cover | 自定义属性 msi ， 如果设置 msi 属性，默认自定义为 msi 内部的 UI 原型，并且一定要设置 max-count 属性 |