# bbq-of-v3

**Repository Path**: firechildren/bbq-of-v3

## Basic Information

- **Project Name**: bbq-of-v3
- **Description**: vue3.x + typescript + rollup + gulp 方式搭建的vue3 组件库 

目前拥有组件：button、switch、message 、collapse、radio、check
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 2
- **Created**: 2021-05-22
- **Last Updated**: 2024-03-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, vue3, H5

## README

# bbq-of-v3

#### 介绍
vue3.x + typescript + rollup 方式搭建的空 vue 组件库 

#### 软件架构
vue3

ts 

rollup 用于编译出 核心js文件

gulp 用于编译出 css


#### 安装教程

1.   npm run local-pack 开始打包工程 生成一个tgz文件，可以作为本地测试用
 
#### 使用说明

 1. bbq-of-v3-1.0.0.tgz 这个包复制进 vue3 的项目根目录下 npm install bbq-of-v3-1.0.0.tgz 
 2. 该vue3项目可以是ts 也可以是js
 3. 安装完成后在main.js中添加如下代码

 
```
import bbq from 'bbq-of-v3'

import 'bbq-of-v3/lib/css/index.css'

const app = createApp(App)

app.use(bbq)

app.mount('#app')
```
#### 自定义样式 
   因为该ui是用scss编译过来的，一般来说是引用编译后的css。
   但是如果需要自定义某些样式的颜色的话，就需要引入为编译前的源文件 即scss，因为需要自行的覆盖掉一些全局属性来起到主题修改的效果。在使用自定义样式的方式有一个前提就是vue3项目中已经引入了sass依赖
 控制台执行：
```
   
vue add style-resources-loader
npm install node-sass sass-loader sass -D
```
 vue.config.js添加如下配置
```
module.exports = {
    pluginOptions: {
      'style-resources-loader': {
        preProcessor: 'scss',
        patterns: []
      }
    }
}
```

样式覆盖流程如下
新建一个scss文件夹，例如myTheme.scss
该文件内容如下

```
//替换全局属性
$primaryColor : gold;
//引入编译前的scss源文件
@import "~bbq-of-v3/src/scss/index";

```
然后main.js中引入ui组件的部分修改为
```
import bbq from 'bbq-of-v3'
import "@/theme/myTheme.scss"
```


#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request