文章摘要：这是一个Vue3组件库开发模板，旨在解决手动搭建组件库的复杂性，提供快速上手、高性能和全功能支持。模板特点包括一键启动、多格式构建及文档生成。此外，模板集成最佳实践，适合个人和团队开发。如果你在开发Vue3组件库，这个模板值得一试！
一、开发者常遇到的痛点
- 手动搭建组件库耗时又复杂，尤其是调试、测试、构建、发布一整套流程让人头疼。
- 缺少模板导致不同项目需要重复造轮子。
- 缺乏高质量的文档生成和自动化工具，组件库难以被推广和复用。
- 每次新增组件时，手动创建十几个文件，还容易遗漏文件
- 组内知识共享总是散乱在各个docs文件下寻找，是否也需要有个门户来作为汇总呢
有了这款模板，以上问题将一键解决！
二、模板的核心优势
1. 快速上手
模板封装了组件库开发的所有基础功能，一键启动，无需额外配置。
2. 高性能
基于 Vue3 和 Vite，构建速度快，支持热更新，让开发体验丝滑流畅。
3. 全功能支持
- 按需加载：无需全量引入，支持 Tree Shaking。
- TypeScript 支持：增强类型安全性，让开发更高效。
- 自动化测试：集成 Vitest 和 Vue Testing Library，轻松保证组件质量。(待支持)
- 多格式构建：支持 ESM、CJS 和 UMD 格式输出，覆盖所有使用场景。
- 文档生成：通过 VitePress 快速生成专业组件文档 & 工具库注释生成文档。
- 一键构建门户 & 组件库文档网站
- 工具库通过函数注释自动生成使用文档
typeDoc - 支持一键新增组件、一键删除组件、一键清空依赖、一键安装依赖等等快捷指令
- 自动生成changeLog，同时打包的时候会同步给文档的日志
- verdaccio 仿造npm服务，模仿发版本流程和下载依赖包测试
- 我们还结合unplugin-vue-components/vite 插件实现了按需加载组件的解析器 KsgUIResolver
4. 开箱即用
集成最佳实践，适合个人开发者、团队项目和开源组件库开发。
三、使用模板的 3 步骤
1. 克隆仓库并安装依赖
npm install -g fe-core-cli
# 创建新项目
fe-core-cli create project-demo
# 1. 选择模板 fast-vue3-lib
# 2. 请输入项目描述信息: (组件库搭建)
# 3. 是否安装快速部署模版: 否
# 4. 请输入包的scope名称 (demo): demo
# 5. 请输入组件名的前缀（如 el: gl
# 6. Are you want to install dependence right now ? (Y/n): y
# 进入到主目录
cd project-demo
目录结构说明
/repository-root
├── /docs 组件库文档（门户文档）
├── /example example站点，调试组件和工具
├── /build 所有打包相关的脚本
├── /cli 命令行工具，快捷增删组件
├── /packages 所有子包
│ ├── /components 所有组件
│ └── /utils 通用工具库
│ └── /theme-chalk 组件库样式目录
├── .gitignore
├── package.json
└── README.md
2. 开发你的组件
将组件代码放在 package/components 目录，例如创建一个按钮组件：
# 新增组件
pnpm gen:component button
# 先初始化生成包(工具包需要先打包)
pnpm build
# example查看组件功能是否完善
pnpm dev:dev
# 编辑docs文件，补充组件使用说明
pnpm docs:dev
3. 构建并发布
# 同时构建工具库和组件库
# 单独构建组件库 pnpm build:lib
# 单独构建工具库 pnpm build:utils
pnpm build
# 更新版本号和日志信息-beta版本
pnpm release:beta
# 更新版本号和日志信息 -- 正式版本
pnpm release
# 本地发布(可结合流水线自动发布)
pnpm publish:only
这一步建议结合流水线配置成自动化，本地走完
pnpm release就完成了，推送到流水线自动发版即可
四、为什么选择这个模板？
-
全面的功能集成：覆盖从开发到发布的完整流程。
- 一键生成完整的组件库代码，聚焦在组件上开发即可
- 通过注释自动生成工具库的说明文档
typedoc - 知识聚合与共享： 团队门户网站自动生成
-
稳定的最佳实践：解决开发者在组件库开发中的常见坑。
- 三方库要怎么按需引入，我们怎么解决antdv二次封装
- monorepo 包管理的运用，子包相互引用
- 组件的发版日志怎么自动生成，发版本规则应该如何制定
- 组件目录分配规则
-
活跃的支持和更新：社区维护，持续优化和功能扩展。
五、实用场景演示
六、如何获取和参与？
- 获取模板
- 通过脚手架获取
npm install -g fe-core-cli
# 选择 fast-vue3-lib
fe-core-cli create xxx-demo
- 参与贡献
欢迎提交 Issue 和 PR，帮助改进模板。
- 联系我们GitHub
七、总结 & 未来展望
未来展望
- 解决antdv样式按需引入的问题
- 拓展无框架限制的组件库
- 完善组件自动化测试，保障稳定性的手段
- 结合 AI自动生成组件说明文档
- 云共享组件
- fe-core-cli 脚手架 去拓展我的沉淀
通过这篇文章，你了解了一个功能强大且易用的 Vue3 组件库模板。它帮助开发者摆脱繁琐的配置，让你专注于组件开发本身。如果你正在开发一个 Vue3 组件库，不妨试试这个模板！
快来体验一下吧，期待听到你的反馈！
