k-lib-ui

前端基础组件库

使用说明

import KLibUI from 'k-lib-ui'

Vue.use(KLibUI)

开发说明

项目架构

本项目采用 mono repo 架构

.
├── packages				# k-lib-ui 包
├── playground			    # vite 版测试项目
├── playground-cli	        # vue-cli 版测试项目
├── server					# ws-server 后端
└── scripts					# 一些脚本

同时本项目只允许使用 pnpm 作为包管理

npm 脚本

根路径

preinstall: 检查是否使用 pnpm 作为包管理器

postinstall: 执行 build:ts 和 build:js

build: 打包所有的包

build:js: 打包 js 版本（即 packages 内的代码，为 k-lib-ui 主包）

build:ts: 打包 ts 版本（即 typed-packages 内的代码，为渐进式重构 k-lib-ui 及新的 ts 版本内容的代码）

build:js: 打包 js 版本

test:js: 启动 jest 自动化测试 k-lib-ui

test:ts: 启动 ts-jest 自动化测试 k-lib-ui-typed

dev: 启动 playground 项目，用于可视化测试组件等等

serve: 启动 playground-cli 项目，作用同 playground，只不过为 vue-cli 的版本

boot: 启动 WebSocket server，作为测试 WebSocket 使用的后端

changelog: 使用 conventional-changelog 生成 changelog，一般需要多加参数 -r <生成的条数，此项目中最少为 2>

bump: 使用 bumpp 升级 k-lib-ui 的版本

开发步骤

flowchart TD
	subgraph "务必安装依赖！"
	A("clone 下来后使用 pnpm i 指令安装依赖")
	B("在 packages 或 typed-packages 文件夹内进行开发")
	D("在 packages/test 或 typed-packages/test 中编写相对应的测试用例")
	E("在根目录使用 pnpm test:ts 或 pnpm test:js 指令进行自动化测试")
	C("在根目录使用 pnpm build 指令进行打包")
	F("在 playground(-cli) 中或根目录下使用 pnpm dev(serve) 指令启动 vite(vue-cli)")
	G("在 playground 中编写测试代码进行测试")
	H("完成后发起 MR 等待 CR")
	end
	A-->B-->D-->E-->C-->F-->G-->H

目前由于 vite 和 vue-cli 对于环境变量要求不一致导致无法做到文件变动后重新打包（监控模式），后续版本会解决此问题

注意事项

• 生成 commit message 请使用 czg

  flowchart TD
  	A["git add <需要添加的文件>"]
  	B["czg 根据汉化后的提示进行选择和填写"]
  	A-->B

  如果你还没有安装 czg，则需要执行 npm i -g czg 以进行安装

  如果你不理解 commit message 的规范，请参考 Commit message 和 Change log 编写指南 - 阮一峰的网络日志 (ruanyifeng.com)

  ❗️如果没有按照规范进行提交，首先 git hook 会进行拦截提交。如果你跳过了 git hook，我们将拒绝合并代码