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