big-ee-ui
Version:
基于element-ui二次封装的UI库
78 lines (60 loc) • 1.55 kB
Markdown
# @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
},
...
}
```