beem-biz-ui

v1.0.0

Published

a year ago

基于Vue 3.5的业务组件库

Downloads

0High
0Medium
0Low

langtuteng

Beem Biz UI

基于 Vue 3.5 的业务组件库，支持 TypeScript，使用 Monorepo 和 Changesets 管理。

项目结构

beem-biz-ui/
├── packages/               # 各个组件包
│   ├── button/             # 按钮组件
│   ├── themes/             # 主题样式
│   └── utils/              # 工具函数
├── .changeset/             # Changesets 配置
├── .storybook/             # Storybook 配置

安装

# 安装单个组件
pnpm add @beem-biz-ui/button
pnpm add @beem-biz-ui/themes

# 使用npm
npm install @beem-biz-ui/button
npm install @beem-biz-ui/themes

使用

全局引入

import { createApp } from 'vue'
import Button from '@beem-biz-ui/button'
import '@beem-biz-ui/themes'
import App from './App.vue'

const app = createApp(App)
app.use(Button)
app.mount('#app')

按需引入

import { createApp } from 'vue'
import { Button } from '@beem-biz-ui/button'
import '@beem-biz-ui/themes'
import App from './App.vue'

const app = createApp(App)
app.component('BizButton', Button)
app.mount('#app')

开发

# 安装依赖
pnpm install

# 启动Storybook开发环境
pnpm storybook

# 构建所有包
pnpm build

# 创建变更集
pnpm changeset

# 基于变更集更新版本
pnpm version

# 发布包
pnpm publish

贡献指南

添加新组件

在 packages 目录下创建新的组件目录
复制现有组件的结构，调整为新组件
运行 pnpm changeset 添加变更记录
提交代码

发布流程

创建变更集: pnpm changeset
更新版本: pnpm version
发布: pnpm publish

代码规范

本项目使用以下工具来保证代码质量和一致性：

ESLint: 代码检查工具
Prettier: 代码格式化工具
Stylelint: 样式检查工具
EditorConfig: 编辑器配置
Husky + lint-staged: Git提交前代码检查
CommitLint: Git提交信息规范检查

提交代码时请遵循以下commit规范：

<type>(<scope>): <subject>

<body>

<footer>

可用的type类型:

feat: 新功能
fix: 修复
docs: 文档变更
style: 代码格式(不影响代码运行的变动)
refactor: 重构(既不是增加feature，也不是修复bug)
perf: 性能优化
test: 增加测试
chore: 构建过程或辅助工具的变动
revert: 回退
build: 打包
ci: CI配置

TypeScript 支持

组件库完全使用 TypeScript 开发，提供完整的类型定义文件，支持 IDE 代码提示和类型检查。

VSCode推荐扩展

为了获得最佳的开发体验，建议安装以下VSCode扩展：

Vue Language Features (Volar)
ESLint
Prettier
EditorConfig
StyleLint

可用组件

Button 按钮组件