Skip to content

1. 安装Git

mac :

2. 基本概念

javascript
// 版本控制 version control system

// 1. 本地VCS
// 2. 集中式VCS   ==> SVN 
// 3. 分布式VCS   ==> Git 

// 分布式意味着:每个开发者都可以在本地保存一份完整的版本
// 集中式:将所有的代码版本,都存放在中心服务器上 

// git 是一种分布式的版本控制系统

3.初始化仓库

javascript
git init 

git三个区
1. 工作区
2. 暂存区
3. git仓库

4. 配置用户名和邮箱

只需要全局配置一次

javascript
// 配置用户名和邮箱
git config --global user.name "your name"   # user.name后面是空格!
git config --global user.email "your email"

// 查看配置信息
git config --list

=> config文件位置

  1. windows: 使用listary 软件:.gitconfig
  2. mac : term终端中: open ~/.gitconfig (iterm)

image.png

第一次提交文件

image.png

javascript
// 1. git add .   // git add .  注意add后面有空格
// 2. git commit -m "提交说明"
// 3. git status  查看文件状态
// 4. git log  查看提交日志

git常用命令

git init

初始化仓库,在当前目录下生成一个隐藏的.git文件夹, 创建了一个仓库管理文件

image.png

javascript
Mac: 显示隐藏的文件夹    => cmd + shift + .
windows: 文件夹上方查看文件,显示隐藏

git status

查看文件状态.

bash
红色 :表示工作区的文件 需要被提交到暂存区
绿色 :表示暂存区的文件

# 简化的看git的文件信息
git status -s 

# clear  cls清楚面板

image.png 工作目录下的每一个文件都不外乎这两种状态:已跟踪未跟踪。 **未跟踪的文件 **指的是,在git仓库目录下,新建的那些文件,一开始都是未跟踪状态image.png已跟踪的文件 是指那些被纳入了版本控制的文件,(已经被git add .添加过) 在工作一段时间后, 它们的状态可能是未修改已修改或已放入暂存区(已暂存

javascript
1. Untracked 未跟踪
2. 已跟踪
 - Unmodify 未修改    ==> 文件从git暂存区,提交到了仓库,文件和仓库中的代码一致
 - Modified 已修改
 - Staged 已暂存

ForExample

1. 未跟踪 => 已暂存

image.png

2. 已暂存 => 未修改

将暂存区的代码,提交后(git commit -m "update"), 文件变为未修改状态 未修改指 工作区的文件和仓库中目前代码保持一致

javascript
nothing to commit, working tree clean

image.png

3. 未修改 => 已修改

工作区刚提交的(处于未修改的)文件,修改一下,写写代码 这个时候查看状态,文件处于 已修改

image.png

5. 已修改 => 已暂存

将工作区红色的修改的文件,执行git add ., 把已修改的文件,放到暂存区中暂时存起来

image.png

bash
红色  ==> 工作区
绿色  ==> 暂存区

# git status -s  ==> 简写的状态

解决中文乱码的问题

javascript
// 解决git status中文显示问题
git config --global core.quotepath false

git add

  1. 跟踪新文件,把新建的一个文件,添加到暂存区(纳入git管理)
  2. 暂存已修改的文件

==> 将工作区的文件,添加到暂存区

image.png

bash
# 1. 一次添加一个文件
git add 文件名

# 2. 一次性添加多个文件到暂存区
git add .

git commit 提交更新

提交更新前,务必确认还有什么已修改或新建的文件还没有 git add 过, 否则提交的时候不会记录这些尚未暂存的变化。 所以,每次准备提交前,先用 git status 看下,你所需要的文件是不是都已暂存起来了, 然后再运行提交命令

将文件由暂存区,添加到仓库区,并生成版本号

image.png

shell
git commit -m "提交信息一定要写"
# commit后,工作区的文件内容, 和 仓库中所保存的文件内容一致

# 跳过暂存区,直接提交 (修改了文件之后,不用输入git add. )
git commit -a -m "提交" ==> 已经提交过的文件修改了,可以直接跳过暂存区,提交到仓库
git commit -am "update"  # 提交信息一定要写清楚

git commit --amend -m "修改上一次提交信息"
跳过使用暂存区

尽管使用暂存区域的方式可以精心准备要提交的细节,但有时候这么做略显繁琐。 Git 提供了一个跳过使用暂存区域的方式, 只要在提交的时候,给 git commit 加上 -a 选项,Git 就会自动把所有已经跟踪过的文件暂存起来一并提交,从而跳过 git add 步骤:

注意,需要已经跟踪过的文件,即提交过的文件,或者 说之前**add . **过的文件

bash
# 跳过暂存区,直接提交 (修改了文件之后,不用输入git add. )
git commit -a -m "提交" ==> 已经提交过的文件修改了,可以直接跳过暂存区,提交到仓库
git commit -am "update"  # 提交信息一定要写清楚

git log

查看历史信息

bash
git log -n 
git log --oneline
shell
# 按时间先后顺序列出所有的提交历史,最近的提交在最上面
git log

# 只展示最新的两条提交历史,数字可以按需进行填写
git log -2

# 一行显示 ,hash简写
git log --oneline 

# 在一行上展示最近两条提交历史的信息
git log -2 --pretty=oneline

# 在一行上展示最近两条提交历史信息,并自定义输出的格式
# &h 提交的简写哈希值  %an 作者名字  %ar 作者修订日志  %s 提交说明
git log -2 --pretty=format:"%h | %an | %ar | %s"

git reset

回退版本

bash
# 在一行上展示所有的提交历史
git log --oneline

# 使用 git reset --hard 命令,根据指定的提交 ID 回退到指定版本
git reset --hard <CommitID>

# 可以查看所有的版本记录
git reflog

git checkout

撤销对文件的修改

提交过的文件,处于未修改的状态,这个时候,修改这个文件 ,文件状态变为已修改,(工作区红色) 我们没有放到暂存,也没有再次提交,撤销修改,谨慎使用

bash
git checkout -- 要撤销修改的文件    # 注意 -- 后面有一个空格

DANGER

git checkout — <file> 是一个危险的命令。 你对那个文件在本地的任何修改都会消失——Git 会用最近提交的版本覆盖掉它。 除非你确实清楚不想要对那个文件的本地修改了,否则请不要使用这个命令。

git rm

bash
# 只从 Git 仓库中移除 index.css,但保留工作区中的 index.css 文件 => 变为未追踪状态
git rm --cached index.css

# 将仓库中的文件变为未跟踪的状态
git rm --cached 文件名
git rm -r --cached .  # 一次性全部移除

.gitignore文件

指定要忽略的有意未跟踪的文件

.gitignore 只忽略没有被追踪的文件, 如果文件已经被纳入了(add .)管理, 则修改.gitignore无效.

bash
1. 新建 .gitignore文件
2. 把想要忽略的文件放到里面去 

# 0. 进入项目路径

# 1. 清除本地当前的Git缓存
git rm -r --cached .

# 2. 应用.gitignore等本地配置文件重新建立Git索引
git add .

# 3. (可选)提交当前Git版本并备注说明
git commit -m 'update .gitignore'

DANGER

使用git的细节

  1. 注意每次打开terminal终端时,当前是不是在对应的要操作的目录下
  2. 如果.git在根目录下,目录中还有文件夹,在对单个里面的单个文件操作时,需要带上外层文件的名字 ==> 推荐 **git add . **一哈梭
  3. 注意空格,该有空格的地方一定不能省略掉,不然无效

10 VSCode配置 git bash

terminal => 终端

javascript
VSCode   Ctrl + j  
或者   Ctrl + ~/` (左上角反引号那个按键)

// 先查看git安装的位置
 where git  查看git的安装目录
 
 C:\Program Files\Git\bin
javascript
// Ctrl + j  
// cmd + j

打开终端的方式 : win + R  ==> 输入cmd

Ctrl + shift + p  ==> 输入 JSON 

// where git 
// path 修改为Git bash的路径

Ctrl + Shift + P ==> 输入 JSON , 找到用户设置

"terminal.integrated.profiles.windows": {
    "PowerShell -NoProfile": {
        "source": "PowerShell",
        "args": ["-NoProfile"]
    },
    "Git-Bash": {
        "path": "C:\\Program Files\\Git\\bin\\bash.exe"
    }
},
"terminal.integrated.defaultProfile.windows": "Git-Bash",


  // 1 . 注意上面path路径 后面是 bash.exe  !!! 注意,两个反斜杠
javascript
# git 三个区域 
工作区  暂存区  git仓库
# 文件的四个状态
未纳入git管理   1. 未跟踪 Untracked

已纳入git管理   1. 未修改 Unmodified
			         2. 已修改 modified 
               3. 已暂存  staged

扩展BFC-面试题

javascript
  <style>
      .box1{
          margin: 50px 0;
          background: pink;
          width: 100px;
          height: 100px;
      }
      .box2{
          margin: 80px 0;
          background: skyblue;
          width: 400px;
          overflow: hidden;
          /* height: 100px; */
      }
      .wrap{
          /* overflow: hidden; */
          /* position: absolute; */
          display: inline-block;
      }
      .left{
          width: 100px;
          height: 100px;
          background-color: orange;
          float: left;
      }
      .right{
          width: 100px;
          height: 100px;
          background-color: orange;
          float: right;
      }
  </style>
</head>
<body>
  <!-- 50 -->
  <div class="box1"></div>

  <div class="box2">
      <div class="left"></div>
      <div class="right"></div>
  </div>
  <script>
      // 1. BFC block format context 块级格式化上下文
      // ==> 就是一个独立的和外界互不干扰的空间容器,块级元素。

      // 2. 怎么触发BFC 或者说创建一个BFC
      // 1. overflow:hidden;
      // 2. position:absolute / fixed;
      // 3. display:inline-block / flex / table-cell
      // 4. float:left / right;  (不太建议,以后工作中也不建议写浮动了)

      // 3. 应用场景
      //   1. 外边距重叠
      //   2. 清浮动(可以包含浮动的元素)
      //      计算BFC高度的时候,会把浮动元素的高度一起计算。
  </script>