【BFUI】一个基于Vue3的开源UI组件库
背景契机
很久之前，我就想着自己能够从头开始参与开发一款前端组件库，来锻炼自己的编程能力和协作水平。当时还摸索着学了如何发布了一个 NPM 包，测试的包名是 @barry-flynn/bfui
，可惜由于后来精力和动力不足，该想法也没有再进行下去，不久后我会将该包设置为弃用状态。2023年初，机会来了，字节跳动“第五届青训营”的大项目题目之一就是 组件库，另外两个题目是 基于SSR开发仿掘金站点 和 关于新冠疫情的数据可视化作品。
组队立项
这届青训营大概有4000多名学员，光基础班就有3000多人。临开课前，大家在活动群里大家都展示着自己的技术栈，寻找合适的同学组队。实话实说，看着那么多人的消息刷屏，又感受到了之前参加第二届青训营的压迫感，感觉自己分分钟淹没人海中。
在1月12日晚上顺利完成了组队，于是接下来的时间我将与其他五位队员完成组件库任务的开发。
在1月13日上午，团队成员来了场语音会议，商讨了一些开发细节，初步暂定如下：
- 组件库名将延续
BFUI和其LOGO，并在GitHub建立了组织 BF-Teams。 - 开发语言：
Vue2 + JS + TS/Es6、babel + flow，Css预编译器采用Less - 代码风格：
Eslint + prettier - 打包工具：
Vue-CLI + Webpack - 依赖管理：
npm - 版本控制：
Git + GitHub - 文档构建：
VuePress 2
- 组件库名将延续
经过研究讨论，对技术选型进行了一些调整：
- 开发语言：项目确定要使用
TypeScript，考虑到 Vue2 对其支持不是很好，故更换为Vue3 - 依赖管理：参考了多个同类组件库，最后考虑到 Vue 生态仓库逐渐迁移到 pnpm，故更换为
pnpm管理依赖 - 打包工具：由于 Vuepress2 默认打包工具是 Vite，考虑到方便且构建速度问题，决定使用
Vite进行项目构建
- 开发语言：项目确定要使用
因此本项目采用的技术栈大致如下：
- 开发语言：
JS + Es6 + Less + Vue3 + Babel + TS - 代码风格：
Prettier + ESLint + stylelint - 代码提交：
husky + lint-staged + commitlint - 打包工具：
Vite - 文档构建：
VuePress2 - 依赖管理：
pnpm - 版本控制：
Git + GitHub - 测试工具：
Jest
- 开发语言：
2023年01月25日，创建npm组织 bf-teams
目录结构
参考了同类开源组件库项目，我们初步建立如下目录结构：
组件库 相关链接 开源协议 element-plus 官方文档 GitHub Gitee MIT ant-design 官方文档 GitHub Gitee MIT arco-design-vue 官方文档 GitHub Gitee MIT tdesign-vue-next 官方文档 GitHub Gitee MIT vant 官方文档 GitHub Gitee MIT view-ui-plus 官方文档 GitHub MIT
1 | <root> |
【参考内容】
[2] 【☆】vue3组件库搭建
使用 pnpm 当做包管理工具，用 pnpm workspace 来实现 monorepo 多模块管理。
[4] 【☆】企业级前端组件建设
[5] Vue 注册组件，抽离 withInstall 方法
[6] 前端组件单元测试
[8] 从0到1 开发一个自己的ui库
[10] 基于vue-cli封装自己的ui组件库并上传到npm
[12] 步进式解读Apache许可证
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 百里飞洋！
若存在错误或不当之处，还望兄台不吝赐教，期待与您交流！
WeChat微信打赏- AliPay支付宝打赏
评论
