Vue企業級優雅實戰02-準備工作03-提交 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
+ [email protected]
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
[email protected], [email protected]
​
? 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 地址：//gitee.com

如果沒有帳號，先創建帳號，登錄。 點擊頁面右上角+ 創建新倉庫

新建倉庫

3.2 設置密鑰

設置公鑰

在命令行中輸入命令查看公鑰：

cat ~/.ssh/dscloudy_gitee_id_rsa.pub
 

將顯示的內容複製到上面的文本框中，點擊確定。

image-20200825105303789

輸入密碼後點擊驗證按鈕。 驗證通過後，在命令行中輸入命令判斷是否配置成功：

 

回車後會看到如下提示：

 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 [email protected]:cloudyly/dscloudy-admin-single.git
 

推送到遠程倉庫：

git push -u gitee_origin master
 

推送成功後，在網頁上面便可以看到這個工程了。

4 推送到 GitHub

4.1 創建倉庫

GitHub 地址：//github.com

如果沒有帳號，先創建帳號，登錄。 點擊頁面右上角+ 創建新倉庫。

github新建倉庫

4.2 設置密鑰

設置SSH-Key

進入該頁面後，點擊 ‘New SSH Key’。在命令行中查看之前生成的 GitHub的 SSH-Key：

 cat ~/.ssh/dscloudy_github_id_rsa.pub
 

將結果複製到輸入框中。點擊確定後，會讓輸入 github 的密碼，驗證通過後便添加完成。在命令行中輸入命令判斷是否配置成功：

ssh -T [email protected]
 

回車後會看到提示仍然輸入「yes」，最後出現 successfully authenticated便配置成功。

4.3 推送程式碼

在命令行中回到工程的根路徑，輸入如下命令添加到遠程倉庫：

git remote add github_origin [email protected]:cloudyly/dscloudy-admin-single.git
 

推送到遠程倉庫：

git push -u github_origin master
 

推送成功後，在網頁上面便可以看到這個工程了。

至此，咱們完成了多個 SSH-Key 的配置，一級一套程式碼關聯兩個遠端倉庫的操作。其他操作將會貫穿到後面的實戰中。

 

歡迎關注我的個人公眾號，留言可加我個人微信或交流問題

程式設計師搞藝術

 

VirMach 便宜 VPS

QNews

QNews