Vscode使用Git详解

前言

简介:本文将带你完成 git 安装远程代码仓库创建链接远程仓库代码推送
说明:本文演示所用远程仓库为 gitee(码云),你用 github或者其他的远程仓库也是可以的的
最后:欢迎评论区讨论,我尽力解答你们的疑惑

文章目录

  • 前言
  • 一、安装 git
      • 1.1 打开 git 官网
      • 1.2 如图操作
  • 二、node.js安装
  • 三、创建代码仓库
      • 3.1 来到首页
      • 3.2 新建
      • 3.3 仓库配置
      • 3.4 完成创建
    • 四、链接远程仓库
      • 4.1 打开vscode
      • 4.2 点击代码管理
      • 4.3 复制地址
      • 4.4 链接仓库
      • 4.5 推送代码
      • 4.6 查看结果
  • 五、日常代码推送和拉取
      • 5.1.编辑代码前,最好先拉取一下代码
      • 5.2 话不多说,先拉代码
      • 5.3 推送代码
      • 5.4 检查无误,推送代码
      • 5.5 查看推送情况
  • 六、其他
      • 如果你有其他的问题,也可以评论区留言,包括但不限于,vscode主题设置,背景图片设置等.....

一、安装 git

git官网地址:https://git-scm.com/

1.1 打开 git 官网

1.2 如图操作

Vscode使用Git详解_第1张图片

Vscode使用Git详解_第2张图片
Vscode使用Git详解_第3张图片


鼠标在桌面右键,出现这个 git bash here 就表示 git 已经安装成功
Vscode使用Git详解_第4张图片

二、node.js安装

node.js请自行安装好,若没安装好,百度搜node.js安装,教程很多

三、创建代码仓库

注:我这里仅用 gitee 做演示,如果你更愿意使用其他代码仓库,如 github也是可以的。

3.1 来到首页

来到 gitee 首页,点击 右上角的加号


Vscode使用Git详解_第5张图片

3.2 新建

选择新建仓库


Vscode使用Git详解_第6张图片

3.3 仓库配置

来到新建仓库页面,自定义仓库名称并创建仓库


Vscode使用Git详解_第7张图片

3.4 完成创建

如图所示,仓库就算创建成功了。(gitee 网页暂时放这儿不动,咱们接着往后看)


Vscode使用Git详解_第8张图片

四、链接远程仓库

4.1 打开vscode

用 vscode 打开我们创建好的 vue 项目,点击 源代码管理 按钮


Vscode使用Git详解_第9张图片

若你没有上图按钮,则跟着下图进行操作。有的话跳过此步骤即可

Vscode使用Git详解_第10张图片

4.2 点击代码管理

点击源代码管理按钮后:


Vscode使用Git详解_第11张图片
Vscode使用Git详解_第12张图片

4.3 复制地址

返回我们创建好的 gitee 仓库,复制仓库地址


Vscode使用Git详解_第13张图片

4.4 链接仓库

贴入地址,添加远程仓库


Vscode使用Git详解_第14张图片
Vscode使用Git详解_第15张图片

4.5 推送代码

推送代码,初始化仓库


Vscode使用Git详解_第16张图片

4.6 查看结果

回到 gitee 并刷新页面,如图所示,代码已经推上来了


Vscode使用Git详解_第17张图片

五、日常代码推送和拉取

注意:养成好习惯,先拉再写。先拉在推

5.1.编辑代码前,最好先拉取一下代码


首先,假如这是一个小组协同开发的项目。那我建议开发之前,先要分工明确,你写首页,我写商品页,他写登录页。尽量避免在同一时间,两人及以上同时对一个文件进行修改。
其次,遵守先拉后推规则,在每次提交代前,都先拉取一下代码。这样即使出现两人同时修改了一行代码的问题,也能留给你更大的余地去解决代码冲突。

5.2 话不多说,先拉代码


Vscode使用Git详解_第18张图片

5.3 推送代码

假如我们写了一些代码后:


Vscode使用Git详解_第19张图片

5.4 检查无误,推送代码


Vscode使用Git详解_第20张图片

Vscode使用Git详解_第21张图片

5.5 查看推送情况

返回 gitee ,查看代码推送情况


Vscode使用Git详解_第22张图片

六、其他

如果你有其他的问题,也可以评论区留言,包括但不限于,vscode主题设置,背景图片设置等…

你可能感兴趣的:(VsCode,vscode,git,vue.js)