码迷,mamicode.com
首页 > 其他好文 > 详细

Vue企业级优雅实战02-准备工作03-提交 GIT 平台

时间:2020-09-14 19:16:55      阅读:40      评论:0      收藏:0      [点我收藏+]

标签:webstorm   format   plain   工作   ranch   ls -l   eve   nal   bug   

代码管理、版本管理是件老大难的事情,尤其多人开发中的代码冲突、突击功能时面临的 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
 

技术图片

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
 

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

技术图片

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

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

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

技术图片

4.2 设置密钥

技术图片

进入该页面后,点击 ‘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 的配置,一级一套代码关联两个远端仓库的操作。其他操作将会贯穿到后面的实战中。

 


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

技术图片

 

Vue企业级优雅实战02-准备工作03-提交 GIT 平台

标签:webstorm   format   plain   工作   ranch   ls -l   eve   nal   bug   

原文地址:https://www.cnblogs.com/yeahui/p/13597895.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!