vue-cli创建的项目中的gitHooks原理解析

首先，讲解“vue-cli创建的项目中的gitHooks原理解析”需要了解以下几个概念：

1. git hooks：是一种在特定事件发生时，Git 自动执行脚本的机制，可以用它来自定义钩子函数，在 Git 事件发生时触发执行。

2. vue-cli：是一个脚手架工具，用于快速创建 Vue 项目，提供了一系列的预设配置，可以快速搭建 Vue 项目的基本框架。

3. husky：是一个运行 Git Hooks 的工具，通过 husky 可以方便地管理项目中的 Git Hooks。

那么，vue-cli创建的项目中的gitHooks原理解析，可以分为以下两部分：

一、vue-cli使用gitHooks的方法

Vue-cli项目中，可以使用以下方法启用gitHooks：

1. 安装husky

npm install husky --save-dev

1. 在package.json文件中增加gitHooks的配置

{
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint",
      "commit-msg": "echo OK"
    }
  }
}

1. 重新加载Git Hooks

npx husky install

1. 运行npm命令测试

git commit -m "test"

二、vue-cli项目中的gitHooks原理解析

当我们在运行Vue-cli创建的一个项目时，Vue-cli会创建一个默认的gitHooks：

{
  "gitHooks": {
    "pre-commit": "npm run lint",
    "commit-msg": "node ./node_modules/@vue/cli-plugin-eslint/git-commit-msg.js"
  }
}

这里，“pre-commit”表示在执行git commit之前，会先执行“npm run lint”命令，这个命令是用来检查代码是否符合规范的。如果这个命令返回非零值，git commit就会被拒绝。

“commit-msg”表示在执行git commit时，会执行“node ./node_modules/@vue/cli-plugin-eslint/git-commit-msg.js”命令，这个命令是用来检查 commit message 是否符合规范的。如果这个命令返回非零值，git commit也会被拒绝。

示例1：

比如我们现在新建一个Vue项目，然后在package.json文件中增加如下gitHooks的配置：

{
  "husky": {
    "hooks": {
      "pre-commit": "echo 'Test pre-commit'",
      "commit-msg": "echo 'Test commit-msg'"
    }
  }
}

然后我们在终端执行git commit时，会看到终端输出：

Test pre-commit

示例2：

假设我们现在提交一个不符合规范的commit message，它的内容是：“Test commit-msg”，但实际上我们想要提交的是：“Test commit-msg: the message”，那么在提交时会看到终端输出：

Test commit-msg
husky - commit-msg hook exited with code 1 (error)

这说明我们提交被拒绝了，因为这个commit message不符合规范。