百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

Git使用指南 | 教你轻松学会Git

wxin55 2024-11-19 12:39 7 浏览 0 评论

4000字,教大家学会Git使用。

一、Git基础

1、Git介绍

Git是目前世界上最先进的分布式版本控制系统。

版本控制系统:

设计师在设计的时候做了很多版本

经过了数天去问设计师每个版本都改了些啥,设计师此时可能就说不上来了。这个时候如果能有一个软件能记录每次的文件改动,并且还能协调多用户编辑,那岂不是美滋滋?这个软件应用起来应该像这个样子:

版本

文档名

操作用户

日志

修改时间

1

shejigao.txt

zhangsan

修改标题

2019-10-01 10:10:31

2

shejigao.txt

lisi

删除备注信息

2019-10-01 10:11:49

3

shejigao.txt

lisi

增加了许可协议

2019-10-03 11:31:00

4

shejigao.txt

zhangsan

修改版权信息

2019-10-05 09:32:11

2、Git与Github

2.1、两者区别

Git是一个分布式版本控制系统,简单的说其就是一个软件,用于记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的软件。

Github(https://www.github.com)是一个为用户提供Git服务的网站,简单说就是一个可以放代码的地方(不过可以放的当然不仅是代码)。Github除了提供管理Git的web界面外,还提供了订阅、关注、讨论组、在线编辑器等丰富的功能。Github被称之为全球最大的基友网站。

2.2、Github注册

打开Github官网:https://github.com/,点击右上角的“Sign up”按钮。

选择免费的账户类型:

提示我们需要验证邮箱:

打开邮箱中收到的邮件,点击按钮进行验证:

至此,Github帐号注册完毕,我们将在后面会使用到本次注册的帐号。

3、Git安装

①下载得到安装包,并运行

②选择软件的安装位置

③选择需安装的组件(默认即可,直接下一步)

④选择使用的编辑器(默认即可,直接下一步)

⑤环境变量调节

⑥使用OpenSSH,直接下一步即可

⑦使用OpenSSL库

⑧配置命令行会话(默认即可)

⑨配置终端(默认即可)

⑩配置额外的选项(默认即可)

安装完成

在桌面空白处右键鼠标,若出现“Git GUI Here”、“Git Bash Here”则安装成功:

二、Git的使用

1、本地仓库

1.1、工作流程

Git本地操作的三个区域:

工作流程:

1.2、本地仓库操作

什么是仓库呢?仓库又名版本库,英文名repository,我们可以简单理解成是一个目录,用于存放代码的,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改、删除等操作Git都能跟踪到。

①在安装好后首次使用需要先进行全局配置

桌面空白处右键,点击“Git Bash Here”以打开Git命令行窗口

②创建仓库

当我们需要让Git去管理某个新项目/已存在项目的时候,就需要创建仓库了。注意,创建仓库时使用的目录不一定要求是空目录,选择一个非空目录也是可以的,但是不建议在现有项目上来学习Git,否则造成的一切后果概不负责!

注意:为了避免在学习或使用过程中出现各种奇葩问题,请不要使用包含中文的目录名(父目录亦是如此)。

a. 创建空目录

b. 在命令行中进入项目目录pro_git

c. Git仓库初始化(让Git知道,它需要来管理这个目录)

指令:git init

表现:执行之后会在项目目录下创建“.git”的隐藏目录,这个目录是Git所创建的,不能删除,也不能随意更改其中的内容。

③Git常用指令操作

查看当前状态:git status

添加到缓存区:git add 文件名

提交至版本库:git commit -m “注释内容”

在后续对于文件(可以操作1个或多个)操作之后,重复使用git add与git commit指令即可。

1.3、时光穿梭机——版本回退

版本回退分为两步骤进行操作:

步骤:

①查看版本,确定需要回到的时刻点

指令:

git log

git log --pretty=oneline

②回退操作

指令:

git reset --hard 提交编号

案例:想坐时光机回到创建好第一个文件readme.txt的时候。

注意:回到过去之后,要想再回到之前最新的版本的时候,则需要使用指令去查看历史操作,以得到最新的commit id。

指令:git reflog

小结:

  • a. 要想回到过去,必须先得到commit id,然后通过git reset –hard 进行回退;
  • b. 要想回到未来,需要使用git reflog进行历史操作查看,得到最新的commit id;
  • c. 在写回退指令的时候commit id可以不用写全,git自动识别,但是也不能写太少,至少需要写前4位字符;

2、远程仓库

线上仓库的操作学习以Github为例。

2.1、线上仓库创建

打开创建仓库页面:https://github.com/new

圈出的部分为必填项,其余根据实际需要选择性补充:

注意:仓库名要求在当前帐号下唯一。

2.2、两种常规使用方式

2.2.1、基于http/https协议

a. 创建空目录,名称就称为shop

b. 使用clone指令克隆线上仓库到本地 语法:git clone 线上仓库地址

c. 在仓库上做对应的操作(提交暂存区、提交本地仓库、提交线上仓库、拉取线上仓库)提交到线上仓库的指令:git push

在首次往线上仓库shop提交内容的时候出现了403的致命错误,原因是不是任何人都可以往线上仓库提交内容,必须需鉴权。

需要修改“.git/config”文件内容:

例如:

在设置好用户名密码之后再次尝试push指令:

如果看到类似上述效果(没有fatal错误)则表示提交成功。

【验证】此时可以观察浏览器,刷新线上仓库的地址:

拉取线上仓库:git pull

提醒: 在每天工作的第一件事就是先git pull拉取线上最新的版本;每天下班前要做的是git push,将本地代码提交到线上仓库。

2.2.2、基于ssh协议(推荐)

该方式与前面https方式相比,只是影响github对于用户的身份鉴权方式,对于git的具体操作(如提交本地、添加注释、提交远程等操作)没有任何影响。

生成公私玥对指令(需先自行安装OpenSSH):ssh-keygen -t rsa -C "注册邮箱"

步骤:

①生成客户端公私玥文件

②将公钥上传到Github

实际操作:

①打开提示

②创建公私玥对文件

③上传公钥文件内容(id_rsa.pub)

填写完毕之后保存即可。

④执行后续git操作,操作与先前一样

a. clone线上仓库到本地(git clone)

b. 修改文件后添加缓存区、提交本地仓库、提交线上仓库

在push的时候并没有提示要求我们输入帐号密码,因为公私玥已经实现了用户身份鉴权。

线上仓库的效果:

2.3、分支管理

什么是分支?

在版本回退的章节里,每次提交后都会有记录,Git把它们串成时间线,形成类似于时间轴的东西,这个时间轴就是一个分支,我们称之为master分支。

在开发的时候往往是团队协作,多人进行开发,因此光有一个分支是无法满足多人同时开发的需求的,并且在分支上工作并不影响其他分支的正常使用,会更加安全,Git鼓励开发者使用分支去完成一些开发任务。

查看分支:

注意:当前分支前面有个标记“*”。

创建分支:

切换分支:

合并分支:

现在先在dev分支下的readme文件中新增一行并提交本地

切换到master分支下观察readme文件

将dev分支的内容与master分支合并:

删除分支:

注意:在删除分支的时候,一定要先退出要删除的分支,然后才能删除。

合并所有分支之后,需要将master分支提交线上远程仓库中:

2.4、冲突的产生与解决

案例:模拟产生冲突。

①同事在下班之后修改了线上仓库的代码

注意:此时我本地仓库的内容与线上不一致的。

②第二天上班的时候,我没有做git pull操作,而是直接修改了本地的对应文件的内容

③需要在下班的时候将代码修改提交到线上仓库(git push)

提示我们要在再次push之前先git pull操作。

【解决冲突】

④先git pull

此时git已经将线上与本地仓库的冲突合并到了对应的文件中。

⑤打开冲突文件,解决冲突

解决方法:需要和同事(谁先提交的)进行商量,看代码如何保留,将改好的文件再次提交即可。

⑥重新提交

线上效果:

新手上路小技巧:上班第一件事先git pull,可以在一定程度上避免冲突的产生。

三、Git实用技能

1、图形管理工具

①Github for Desktop

Github出品的软件,功能完善,使用方便。对于经常使用GitHub的开发人员来说是非常便捷的工具。界面干净,用起来非常顺手,顶部的分支时间线非常绚丽。

②Source tree

老牌的Git GUI管理工具了,也号称是最好用的Git GUI工具。功能丰富,基本操作和高级操作都非常流畅,适合初学者上手。

③TortoiseGit

对于熟悉SVN的开发人员来说,这个小乌龟图标应该是非常友善了。TortoiseGit 简称 tgit, 中文名海龟Git。它与其前辈TortoiseSVN都是非常优秀的开源版本控制客户端软件。

2、忽略文件

场景:在项目目录下有很多万年不变的文件目录,例如css、js、images等,或者还有一些目录即便有改动,我们也不想让其提交到远程仓库的文档,此时我们可以使用“忽略文件”机制来实现需求。

忽略文件需要新建一个名为.gitignore的文件,该文件用于声明忽略文件或不忽略文件的规则,规则对当前目录及其子目录生效。

注意:该文件因为没有文件名,没办法直接在windows目录下直接创建,可以通过命令行Git Bash来touch创建。

案例:

①先在本地仓库中新建一个js目录以及目录中js文件

②依次提交本地与线上

③新增.gitignore文件

④编写文件中的规则(根据需要编写)

⑤再次提交本地与线上

观察线上仓库js目录中是否有新增index.js文件:

相关推荐

总结雅虎前端性能优化技巧(16条)

前言在日常开发中,有很多场景需要我们去做好前端优化,为了防止遗忘,加深记忆,今天参阅了一些资料以及自己的一些总结,梳理出来15条优化技巧。1.合并文件css、js合并,减少http请求数,每次http...

前端掉坑血泪史!4 个 React 性能优化绝招让页面秒开

在前端圈子里摸爬滚打这么多年,我发现React开发时踩坑的经历大家都大同小异。页面加载慢、组件频繁重渲染、状态管理混乱……这些痛点,相信不少前端工程师都感同身受。别愁!今天就给大家分享4个超...

Qwik:革新Web开发的新框架

听说关注我的人,都实现了财富自由!你还在等什么?赶紧加入我们,一起走向人生巅峰!Qwik:革新Web开发的新框架Qwik橫空出世:一场颠覆前端格局的革命?是炒作还是未来?前端框架的更新迭代速度,如同...

大模型服务平台百炼使用

提供完整的模型训练、微调、评估等产品工具,预置丰富的应用插件,提供便捷的集成方式,更快更高效地完成大模型应用的构建。一、通过变量的方式使用平台模板一个好的Prompt可以更好的让模型理解我们的需求,产...

Vue应用性能优化实战:8 个提升页面加载速度的关键策略

一、构建优化与代码精简1.1代码分割与异步加载路由级代码分割:使用动态导入语法拆分路由组件组件级懒加载:结合Suspense实现按需加载javascript//vue-router4.x配置...

前端里那些你不知道的事儿之 【window.onload】

作者:京东科技孙凯一、前言相信很多前端开发者在做项目时同时也都做过页面性能优化,这不单是前端的必备职业技能,也是考验一个前端基础是否扎实的考点,而性能指标也通常是每一个开发者的绩效之一。尤其马上接近...

谷歌站长后台的“核心网页指标”不合格先优化哪个最有效?

根据对上千个网站案例的分析,90%的站长在修复时都陷入“盲目优化”误区——要么死磕服务器配置却忽略图片规范,要么过度压缩JS反而引发CLS布局错位。事实上,移动端页面抖动(CLS)才是60%中小网站的...

Vue3 开发效率拉胯?这 10 个技巧让你开发速度翻倍!

写Vue3项目时,是不是经常被数据更新延迟、组件间传值混乱、页面卡顿这些问题搞得焦头烂额?别担心!今天带来10个超实用的Vue3实战技巧,全是从真实项目中总结出来的“血与泪”经验,帮你...

2024年的JavaScript性能优化:仍然重要吗?

#记录我的9月生活#在不断发展的Web开发领域,新的JavaScript框架和库令人眼花缭乱,很容易让人忽视一些基本的东西。但在这股兴奋之中,性能作为一个卓越用户体验的基石,不能被忽略。为什么?因为...

JS 图片简易压缩【实践】

作者:政采云前端团队转发链接:https://juejin.im/post/5ea574cc518825736e57fcca前言说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类...

Vue3 开发总踩坑?这 10 个技巧让你少走半年弯路!

前端开发的路上,Vue3虽然强大,但坑也不少!性能优化总没效果?复杂组件通信一头雾水?别担心!今天分享10个超实用的Vue3实战技巧,全是一线开发总结的经验,帮你轻松避开开发雷区,效率直接拉...

前端分享-Vue首屏加载优化

首屏加载速度直接影响用户留存率——当加载时间超过3秒,53%的用户会直接离开(网上来的数据)。Vue单页应用尤需重视,因为传统打包方案会将所有资源打包成巨大的vendor.js,导致用户首次访问时像下...

Core Web Vitals 变了,网站性能这件事得重新关注

现在做网站优化,不能只看速度条,不管你是搞外贸独立站,还是给品牌建站,体验页面这件事你迟早得面对。谷歌这两年把网站的“体验感”提得越来越多,尤其是CoreWebVitals(网页核心指标)一出来,...

页面卡顿到崩溃?5 个实战技巧让前端性能飙升 80%!

作为前端工程师,你有没有遇到过这种情况:精心开发的页面,一上线就被用户吐槽卡顿、加载缓慢,甚至频繁崩溃。明明代码逻辑没问题,可性能就是上不去,这到底是哪里出了问题?别着急,今天就来分享5个超级实用...

周末复习前端js基础知识点总结一,记录完之后好复习(大佬勿喷)

一、深浅拷贝知识1、基本数据类型只有赋值没有拷贝2、数组和对象的赋值是浅拷贝3、结构赋值是深拷贝还是浅拷贝?二、实现深拷贝的几种常用方法方法1、通过json方法深拷贝方法2.基本的封装深拷贝的方法采用...

取消回复欢迎 发表评论: