🚀 开箱即用的现代化组件库模板:让搭建组件库变得像搭积木一样简单
还在为搭建组件库而头疼吗?还在为配置环境而焦虑吗?来试试这个保姆级的组件库模板吧!
🎯 这是什么神仙项目?
想象一下,如果搭建一个企业级组件库就像搭积木一样简单,是不是很棒?这个项目就是为此而生!
这是一个基于 Turborepo + Vue 3.5 + TypeScript
的现代化组件库模板,它就像一个全能保姆,不仅帮你配好了所有繁琐的配置(ESLint、Prettier、Stylelint等等),还贴心地准备了详细的保姆级注释。采用 Monorepo 架构,让你的代码管理像积木一样清晰有序。无论你是想搭建个人组件库,还是企业级组件库,它都能让你事半功倍!
🌟 github地址:github.com/huangmingfu... 🎮 演示地址:huangmingfu.github.io/vue3-turbo-...
✨ 特性(好处都有啥?)
- 📦 基于 Monorepo 架构 ------ 代码管理就像整理衣柜,每件衣服都有自己的格子
- 🚫 强制采用 pnpm ------ 告别幽灵依赖,让你的项目瘦身又提速
- 🚀 Turbo + Vue 3.5 + TypeScript ------ 带你体验技术界的"速度与激情"
- 🎨 完整的代码规范配置 ------ 代码风格统一,不再为代码风格争论
- 📚 VitePress 文档 + 国际化 ------ 让你的文档说中文也说英语
- 🔥 按需引入 ------ 包体积小得惊人,加载速度快得飞起
- 🎯 完整类型提示 ------ 代码提示超智能,告别反复翻文档
- 🛠️ 丰富的工具函数和 Hooks ------ 开发效率提升200%
- 🔄 热更新 ------ 改完代码立即生效,爽感满满
- 🔧 一键换包名 ------ 一秒变身专属组件库
- ⚡️ 双打包模式 ------ gulp + rollup统一打包,想怎么打包就怎么打包
- 📝 版本发布管理 ------ 用 changeset 让版本管理变得优雅
📦 项目结构(麻雀虽小,五脏俱全)
项目采用 Monorepo 架构,结构清晰得像是整理好的积木盒:
packages/lint-configs
:各种配置都在这里,让代码风格统一又漂亮packages/hooks
:自定义 Hooks,让逻辑复用超轻松packages/directives
:Vue指令,功能增强全靠它packages/utils
:工具函数,开发效率提升全靠它packages/ui
:UI组件,界面美化就靠它apps/docs
:文档中心,用 VitePress 构建,清晰又漂亮playground
:组件试验场,想怎么玩就怎么玩build
:打包脚本,想怎么打包都行
🎮 快速开始(30秒上手)
bash
# 一行命令搞定安装,@mylib 可以一键换成你的包名
pnpm add @mylib/ui @mylib/utils @mylib/hooks @mylib/directives
# 比如我换成了 @hmflib
pnpm add @hmflib/ui @hmflib/utils @hmflib/hooks @hmflib/directives
📚 文档中心
中英文随意切换,想看中文看中文,想看英文看英文
🎮 演练场
组件随便玩,想怎么测试就怎么测试
🔗 技术栈
站在巨人的肩膀上,感谢这些优秀的开源项目
- Vue 3 - 渐进式JavaScript框架
- TypeScript - JavaScript的超集
- Turborepo - 高性能构建系统
- Vitepress - 静态站点生成器
- Vite - 下一代前端构建工具
- Vben-admin - 优秀的开源项目
💡 常见问题(踩坑指南)
-
遇到
rm -rf
或shell
命令执行不了?别急,用git bash终端就搞定了!clean
、rename-pkg
等命令不能运行?用git bash就对了! -
pnpm run dev
运行失败?先来个pnpm run build
热热身,再运行就没问题了!
✅ 已完成的功能
- 更新日志管理 - changesets让版本管理更优雅
- gulp打包配置 - 打包方式随心选
- utils包测试用例 - 测试全覆盖,质量有保障
- 完善文档 - 文档即代码,清晰易懂
- 一键改包名 - 一秒变身专属组件库
- github pages部署 - 文档随时随地可访问
- 类型提示优化 - 开发体验超棒
👉 快来Star这个项目吧!让我们一起打造属于自己的组件库!