# pb-components

**Repository Path**: osaiyoyou/pb-components

## Basic Information

- **Project Name**: pb-components
- **Description**: 通用组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-04-16
- **Last Updated**: 2025-07-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# pb-components uniapp公用组件库

##### pb-components使用到了uview，在主项目中需要集成uview，可以使用官方的[uview](https://uviewui.com/components/npmSetting.html)，也可以使用fork下来[定制的uview](https://gitee.com/osaiyoyou/uview-ui/blob/master/README.md)

- 项目pb-components组件依赖配置
```
在项目根目录的package.json(如果没这个文件跑一下命令：npm init)文件中做如下配置#master表示从master分支上下载最新版本，
{
  "dependencies": {
	"uview-ui": "git+https://gitee.com/osaiyoyou/uview-ui.git#master",
    "pb-components": "git+https://gitee.com/osaiyoyou/pb-components.git#master"
  }
}
若要使用固定版本
{
  "dependencies": {
	"uview-ui": "git+https://gitee.com/osaiyoyou/uview-ui.git#1.0.0"
    "pb-components":"git+https://gitee.com/osaiyoyou/pb-components.git#1.0.0"
  }
}
```

- 安装|更新pb-components组件
```
npm install pb-components
```

- 设置easyCom,在pages.json文件里配置easycom加载规则，使得组件支持easycom规范直接使用
```
"easycom": {
	"autoscan": true,
	"custom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
		"^pb-(.*)":"pb-components/components/pb-$1/pb-$1.vue"
	}
}
```

- uni.scss文件设置全局样式、全局变量、引入uview主题样式（自定义组件中主题色依托与各个项目主题色）
```
/* 字体颜色 自定义*/
$text-title: #333333;
$text-main: #4F4F4F;
$text-auxiliary: #828282;
$text-invalid: #DEDEDE;

// 全局变量定义（自定义）
:root {
	--uni-color-primary: #00B4BF;
	--text-main: #4F4F4F;
	--text-title: #333333;
	--text-auxiliary: #828282;
	--text-invalid: #DEDEDE;
}
@import '@/node_modules/uview-ui/theme.scss';

```

- 主项目App.vue引入公用scss样式
```
<style lang="scss">
	/*每个页面公共css */
	@import "@/node_modules/uview-ui/index.scss";
	@import "@/node_modules/pb-components/index.scss";
</style>

```

- main.js中全局引入uview
```
import Vue from 'vue'
import uView from 'uview-ui'

Vue.use(uView)
```