AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第1张图片

又是认真学习的一天。

1.Git 初识

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第2张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第3张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第4张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第5张图片

2.掌握 Git 仓库

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第6张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第7张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第8张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第9张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第10张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第11张图片

3.Git 的三个区域

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第12张图片

git ls-files 查看当前暂存区有哪些文件

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第13张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第14张图片

4.Git 文件状态

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第15张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第16张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第17张图片

5.Git 暂存区使用

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第18张图片

使用git restore命令恢复修改过的index.css

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第19张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第20张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第21张图片

使用git rm --catched命令从暂存区移除index.css文件

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第22张图片

再用git add .放回9(皮一下)

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第23张图片

6.练习-登录页面

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第24张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第25张图片

查看提交历史git log --oneline

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第26张图片

7.Git 回退版本

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第27张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第28张图片

关于git reset --hard命令 

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第29张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第30张图片

之前执行了git reset --mixed,暂存区里只有index.html

所以没有对比暂存区和工作区删除工作区其他文件

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第31张图片

使用之前的提交记录恢复(可以使用git relpg --online)

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第32张图片

8.删除文件

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第33张图片

清空终端控制台命令:clear

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第34张图片

注意:只删除工作区,然后提交,还是会被记录

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第35张图片

需要更新暂存区

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第36张图片

9.忽略文件

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第37张图片

忽略文件呈现为灰色

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第38张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第39张图片

10.分支

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第40张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第41张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第42张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第43张图片

创建并切换分支

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第44张图片

进行三次提交后查看提交记录

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第45张图片

切换回master分支,代码变化

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第46张图片

11.练习-登录 bug 修复

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第47张图片

1.切回主分支

2.创建新分支

3.切换新分支

修改代码,暂存,提交产生版本记录

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第48张图片

查看提交的版本记录

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第49张图片

还有验证码长度判断

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第50张图片

12.分支-合并与删除

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第51张图片

head指针Fast-forward快进到c10

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第52张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第53张图片

删除login-bug分支后查看所有分支

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第54张图片

13.分支-合并与提交

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第55张图片

采用org策略

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第56张图片

最终生成的分支按提交次序排列

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第57张图片

14.分支-合并冲突

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第58张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第59张图片

vscode给出提示,分支显示正在合并过程中

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第60张图片

可以选择“保留双方更改”

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第61张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第62张图片

还可以选择“比较变更”

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第63张图片

把发生冲突的当前文件进行拆分,标注进行比较

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第64张图片

还可以选择“采用当前的更改”和“采用传入的更改”

保留其中一份记录

采用当前更改,解决冲突后,提交记录

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第65张图片

提交记录太多,按回车键展示剩余,或者q键退出

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第66张图片

合并完成后,可以删除publish分支

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第67张图片

15.Git 常用命令

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第68张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第69张图片

16.Git 远程仓库

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第70张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第71张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第72张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第73张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第74张图片

第一次使用需要输入gitee的账号密码

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第75张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第76张图片

上传成功

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第77张图片

可以选择开源,让大家都可以下载

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第78张图片

如果当前电脑需要访问其他账号的仓库,删除旧的凭据

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第79张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第80张图片

17.Git 远程仓库-克隆

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第81张图片

使用终端,

打开准备好的文件夹,可以在路径输入cmd,也可以右键选择使用git bash

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第82张图片

cd git-study进入文件夹(仓库,含.git文件)

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第83张图片

18.多人协同开发

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第84张图片

相当于执行了两条命令

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第85张图片

19.VSCode 中使用 Git

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第86张图片

更改代码,工具栏的源代码管理图标右下角出现数字

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第87张图片

打开会展示修改处的对比

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第88张图片

可以选择点击图标,放弃更改

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第89张图片

还可以暂存更改

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第90张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第91张图片

还可以提交记录

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第92张图片

git log --oneline查看本地版本记录

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第93张图片

可以点击按钮提交到远程仓库

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第94张图片

还有更多远程仓库操作:

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第95张图片

先pull再push

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第96张图片

20.案例-发布黑马头条数据管理平台

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第97张图片

本地push上传前需要pull

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第98张图片

拒绝合并“不想关”的历史记录(当前,本地仓库和远程仓库的分支没有任何关系)

强制进行合并

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第99张图片

查看合并效果

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第100张图片

再push到远程仓库

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第101张图片

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第102张图片

开启page服务

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第103张图片

因为仅支持公开仓库开通

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第104张图片

管理->基本信息->开源->勾选

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第105张图片

使用根路径(可以访问整个仓库的内容)

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第106张图片

21.Git 常用命令

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(十)_第107张图片

你可能感兴趣的:(框架前置,node.js,学习,前端框架,ajax,前端,git,webpack)