作為前端開發人員,使用Git管理代碼是必不可少的技能,關于Git的使用流程,已經有很多的文章,具體可以參考廖雪鋒的網站Git教程,英文好的同學,可以參考Git官網
使用Vue-cli@3搭建好后臺后的基礎框架之后,就是將我們的項目放在Git上,Git管理的有很多,國內的有碼云、國外比較流行的有Github、或者自己搭建一個Gitlab也可以。這里我們推薦使用Github來管理自己的代碼。使用Github,首先你得有Github的帳號,注冊是比較簡單的,這里就不做介紹了,下面介紹下如何一步步將自己的代碼上傳到Github上,并做一個版本分支的管理
1. 在Github上創建項目
點擊個人頭像,在下拉列表中選擇Your repositories
進入個人倉庫
2. 初始化項目
進入到個人倉庫,在個人倉庫中,包含你自己的項目以及你fork的一些項目,點擊右上方的New
按鈕,一般Git項目中會需要填寫以下幾項:
- 項目名稱(必填)
- 項目描述
- 項目是公有還是私有
- 是否初始化Readme
- 是否添加gitignore
-
選擇項目license如果是個人學習性質的項目,一般填寫下1和5即可
配置項目屬性
項目創建完成之后如下圖
image.png
3. 上傳代碼
在已打開的項目中,點擊右上方的Clone or download
按鈕,在彈出的對話框中,點擊地址旁邊的copy按鈕,復制項目地址
image.png
在個人的項目文件夾中,使用git命令,克隆項目,我們這邊使用vscode,在使用git命令之前,請確保你已經安裝了git
image.png
克隆成功后,項目如下:
項目中包含.gitignore和LICENSE兩個文件,其他都是空的
image.png
接下來我們使用vue-cli@3初始化一個基于element-ui的項目,具體可參考上一篇文章基于Element-UI的Vue管理后臺搭建
跟之前文章有區別的是,我們是已經克隆了一個項目下來了,所以可以先創建一個項目,然后把整個項目拷貝過來
注意不要拷貝.git和git相關的文件/文件夾
-
選擇創建項目
image.png -
填寫項目信息
image.png -
選擇手動配置項目(為了讓大家清楚每個配置)
image.png
image.png
image.png
完成配置后,添加Element-UI插件
image.png
image.png
完成之后點擊【完成安裝】(這里忘了截圖了)
安裝之后項目目錄結構如下:
image.png
安裝完成后,將整個項目拷貝到我們的git項目中
image.png
在命令行中輸入以下命令
git add .
image.png
git commit -m 'init project'
image.png
最后使用
git push
將我們的代碼推送到github服務器
image.png
此時刷新我們的github項目,就可以看到項目已經推送上來了
image.png
歡迎加群討論
圖片發自簡書App