Vue企业级优雅实战-02-提交 GIT 平台

代码管理、版本管理是件老大难的事情，尤其多人开发中的代码冲突、突击功能时面临的 hotfix 等。本文只是简单说说如何将一套代码提交到两个 Git 平台（GitHub、GitEE）上。其他的 Git 操作：如本地 commit、远程 push、pull、开启新分支、分支合并等操作，再后面的文章中都会有操作 —— 每一个功能点我都会开启一个新分支。

1 初始化本地 Git 仓库

1.1 初始化仓库

将本地一个目录初始化为本地 git 仓库的命令是：

git init

由于咱的工程是通过 vue-cli 创建的，默认已经初始化本地 git 仓库了，故不需要执行上述命令。

1.2 查看状态

在 webstorm 中打开底部的 Termial 窗口，默认会进入到当前工程根路径的命令行中，输入下列命令查看当前代码的状态：

git status

显示如下内容：

MacBook-Pro dscloudy-admin-single % git status
On branch master
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        src/modules/

nothing added to commit but untracked files present (use "git add" to track)

提示 src/modules/ 没有纳入到 git 的版本管理中。（虽然咱们新创建了很多目录，但里面没有文件，故 git 是不会提示的，只有当里面有文件时，才会检测）。

1.3 添加文件

按照上面的提示，将 src/modules/ 添加到 Git 版本管理中：

git add src/modules/

说明：如果上面提示的内容都全部需要添加到提交列表中，则可以使用 . 匹配全部：

git add .

此时再执行 git status, 会发现上面的提示变成黄色的。如果还是红色，也许你 add 后面的路径有错误。

1.4 提交文件

上面的操作已经将新文件或有改动的文件，添加到待提交的列表中，接下来便是将改动提交到本地仓库：

git commit -m '初始化工程'

此时再次执行 git status, 会显示：

MacBook-Pro dscloudy-admin-single % git status
On branch master
nothing to commit, working tree clean

git 提交建议遵循业内规范，随着项目增大、提交数越来越多，git commit message 可以提供很多历史信息、便于快速查找，我个人偏好 Angular 的规范，推荐使用工具 commitizen 规范提交信息的格式。同时还可以借助 conventional-changelog 生成 Change Log。

1.5 安装使用 commitizen

commitizen的运行基于 Node JS，在命令行中全局安装：

npm install -g commitizen

显示如下信息，则说明安装成功：

MacBook-Pro ~ % npm install -g commitizen
/usr/local/bin/git-cz -> /usr/local/lib/node_modules/commitizen/bin/git-cz
/usr/local/bin/cz -> /usr/local/lib/node_modules/commitizen/bin/git-cz
/usr/local/bin/commitizen -> /usr/local/lib/node_modules/commitizen/bin/commitizen
+ commitizen@4.2.0
added 1 package from 1 contributor, removed 1 package and updated 9 packages in 145.447s

安装好该工具后，需要在命令行中进入工程的根目录，执行下面语句，使工程支持 Angular 的Commit Message 格式：

commitizen init cz-conventional-changelog --save --save-exact

咱这工程以后提交代码，就不再使用 git commit -m 'xxx' 来提交代码了，改为使用 git cz 命令。

由于刚才执行命令使工程支持 commitizen，故自动修改了 package.json 文件。执行 git status ，会看到：

-MacBook-Pro dscloudy-admin-single % git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   package-lock.json
        modified:   package.json

no changes added to commit (use "git add" and/or "git commit -a")

咱就提交这个改动尝试 commitizen。首先还是执行 git add . ，接着执行：

git cz

提示：

-MacBook-Pro dscloudy-admin-single % git cz
cz-cli@4.2.0, cz-conventional-changelog@3.2.1

? Select the type of change that you're committing: (Use arrow keys)
❯ feat:     A new feature 
  fix:      A bug fix 
  docs:     Documentation only changes 
  style:    Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) 
  refactor: A code change that neither fixes a bug nor adds a feature 
  perf:     A code change that improves performance 
  test:     Adding missing tests or correcting existing tests 
(Move up and down to reveal more choices)

这里出现了几个选项，这些选项分别代表不同的提交类型： feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert：

feat: feature, 新功能
fix: 修复 bug
docs: 修改了文档
style: 格式，不影响代码运行的改动（空格、格式化、分号等）
refactor: 重构代码
perf: 性能优化的改动
test: 增加测试
build: 影响构建或外部依赖
chore: 辅助工具的变动，不包括源码和测试文件（如 ESLint 的配置等）
revert: 回到以前提交

刚才咱们的改动影响 package.json，属于 build 类型，选择 build，回车后提示：

? What is the scope of this change (e.g. component or file name): (press enter to skip)

改动影响的范围，直接回车即可。接下来提示输入改动的简短描述：

? Write a short, imperative tense description of the change (max 93 chars):

简要描述本次提交的改动即可，我这里输入：添加 commitizen 的支持。回车后，会依次让输入详细描述、选择是否是 breaking changes、是否影响未关闭的 issues，全部都直接回车即可。最后会提示：

[master 491531b] build: 添加 commitizen 的支持
 2 files changed, 547 insertions(+)

这样就完成了git cz 代码提交。关于生成 Change Log，后面遇到在写。接下来需要分别推送到远程仓库。

2 生成 SSH-Key

我们需要把代码分别推送到 GitHub 和 Gitee，由于两个平台对应两个 git 账号，故需要分别生成两个 SSH-Key。

1、生成 gitee 的 SSH-Key:

ssh-keygen -t rsa -C '你的邮箱' -f ~/.ssh/dscloudy_gitee_id_rsa

执行该命令时会提示 Enter passphrase, 直接回车即可。

2、同样的方式生成 github 的 SSH-Key

ssh-keygen -t rsa -C '你的邮箱' -f ~/.ssh/dscloudy_github_id_rsa

3、查看生成的文件列表

ls -la ~/.ssh

image-20200825104704042

4、配置 config 文件

~/.ssh 目录下会有一个 config 文件，如果没有就新建一个，里面内容如下：

# gitee
Host gitee.com
HostName gitee.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/dscloudy_gitee_id_rsa
# github
Host github.com
HostName github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/dscloudy_github_id_rsa

3 推送到 Gitee

3.1 创建仓库

Gitee 地址：https://gitee.com

如果没有账号，先创建账号，登录。点击页面右上角+ 创建新仓库

新建仓库

3.2 设置密钥

设置公钥

在命令行中输入命令查看公钥：

cat ~/.ssh/dscloudy_gitee_id_rsa.pub

将显示的内容复制到上面的文本框中，点击确定。

image-20200825105303789

输入密码后点击验证按钮。验证通过后，在命令行中输入命令判断是否配置成功：

ssh -T git@gitee.com

回车后会看到如下提示：

Are you sure you want to continue connecting (yes/no/[fingerprint])?

一定要手动输入 yes, 再回车，会提示：

Hi dscloudy! You've successfully authenticated, but GITEE.COM does not provide shell access.

看到 successfully 的字眼，说明配置成功。

3.3 推送代码

在命令行中回到工程的根路径，输入如下命令添加到远程仓库：

git remote add gitee_origin git@gitee.com:cloudyly/dscloudy-admin-single.git

推送到远程仓库：

git push -u gitee_origin master

推送成功后，在网页上面便可以看到这个工程了。

4 推送到 GitHub

4.1 创建仓库

GitHub 地址：https://github.com

如果没有账号，先创建账号，登录。点击页面右上角+ 创建新仓库。

github新建仓库

4.2 设置密钥

设置SSH-Key

进入该页面后，点击 'New SSH Key'。在命令行中查看之前生成的 GitHub的 SSH-Key：

cat ~/.ssh/dscloudy_github_id_rsa.pub

将结果复制到输入框中。点击确定后，会让输入 github 的密码，验证通过后便添加完成。在命令行中输入命令判断是否配置成功：

ssh -T git@github.com

回车后会看到提示仍然输入“yes”，最后出现 successfully authenticated便配置成功。

4.3 推送代码

在命令行中回到工程的根路径，输入如下命令添加到远程仓库：

git remote add github_origin git@github.com:cloudyly/dscloudy-admin-single.git

推送到远程仓库：

git push -u github_origin master

推送成功后，在网页上面便可以看到这个工程了。

至此，咱们完成了多个 SSH-Key 的配置，一级一套代码关联两个远端仓库的操作。其他操作将会贯穿到后面的实战中。

欢迎关注我的个人公众号，留言可加我个人微信或交流问题

程序员搞艺术