【vue3-element-admin】从零到一：用 Husky + Lint-staged + Commitizen 构建企业级 Git 工作流

1. 为什么需要企业级Git工作流

当你接手一个全新的Vue3中后台项目时，最容易被忽视的就是代码提交规范。我见过太多项目因为早期没有建立良好的Git工作流，导致后期出现这些问题：提交信息杂乱无章、代码风格五花八门、回滚时找不到关键节点。这些问题在团队协作时会放大成灾难。

以我们团队去年重构的电商后台为例，最初两个月没有规范，结果：

• 一个紧急热修复要找遍27个"update"提交
• 每次合并代码都要手动解决格式冲突
• 新人看不懂历史提交的业务上下文

企业级Git工作流的核心价值在于：

1. 自动化：在提交时自动检查代码和消息格式
2. 一致性：确保团队使用统一的提交规范
3. 可追溯：通过规范的提交信息建立项目"时间线"

这套组合工具中：

• Husky是Git钩子管理器
• Lint-staged只检查暂存区文件
• Commitizen提供交互式提交引导
• Commitlint验证消息格式

2. 基础环境搭建

2.1 初始化Vue3项目

推荐使用Vite创建基于TypeScript的模板：

bash复制npm create vite@latest vue3-element-admin --template vue-ts
cd vue3-element-admin
npm install

安装基础依赖：

bash复制npm install -D eslint prettier stylelint husky lint-staged 
npm install -D @commitlint/cli @commitlint/config-conventional
npm install -D commitizen cz-git

2.2 Husky自动化配置

新版Husky提供了极简安装方式：

bash复制npx husky-init && npm install

这会自动完成三件事：

1. 创建.husky目录
2. 添加pre-commit钩子示例
3. 在package.json添加prepare脚本

测试钩子是否生效：

bash复制git add .
git commit -m "测试husky"  # 此时会执行pre-commi