# @bes/b-ui 组件库

### 快速开始

#### 1.安装

```bash
npm i @bes/b-ui
```

#### 2.引用组件库

##### 全部引入

```javascript
import BUI from '@bes/b-ui'
import '@bes/b-ui/lib/index/index.css'
Vue.use(BUI)
```

##### 按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
在你的项目中加入babel-plugin-component依赖，执行如下脚本

```javascript
npm install babel-plugin-component -D
```

在babel.config.js 或者.babelrc中添加如下脚本

```javascript
  plugins: [
    [
      'component', // 按需导入组件
      {
        'libraryName': '@bes/b-ui', // UI组件库名称
        'libDir': 'lib/packages', // 包路径，默认lib
        'root': 'index', // 主文件目录，默认index
        'camel2Dash': true, // 是否将名称解析为破折号模式，默认true
        'style': true// 从 'style.css' 导入 js 和 css
      }
    ]
  ]
```

1. 按需引用并全局注册，比如在main.js中

```javascript
import Vue from 'vue'
// 按需加载自定义组件并全局注册
import {
  BButton,
  BIcon,
  BElCascader,
  BElCascaderPanel
} from '@bes/b-ui'
// 全局注册
Vue.use(BButton)
Vue.use(BIcon)
Vue.use(BElCascader)
Vue.use(BElCascaderPanel)

```

2. 按需引用并在使用页面注册,比如在test.vue页面

 ```javascript
import { BElCascader } from '@bes/b-ui'
export default {
  components: {
    BElCascader
  },
  ...
}

```