使用git完成一个项目的搭建并上传

了解 git 和 github

git 和 github这是两个东西不是同一个,

git

开源的分布式版本管理器,就是一个 “软件”, 用来管理我们的文件夹
作用:

  1. 托管代码到远程
  2. 多版本管理
  3. 团队协作

github

是一个远程的代码托管平台(类似于百度云),国外的网站{ gitee(码云) ,国内的网站}。

特点:依靠 git 进行代码的上传

git 安装

  1. 来到官网下载
    2. 双击安装包运行
    -> 一路下一步
    -> 最后 install
    3. 检测
    -> 两个办法
    3-1. 打开命令行
    => 输入指令 git --version
    => 出现版本号
    3-2. 随便找一个空白的位置
    => 点击鼠标右键
    => 出现 git bash here 和 git GUI here
    => 就是安装成功

安装包提取链接:

git 的卸载

来到控制面板 直接卸载

git 的基本使用流程

因为 git 是管理我们文件夹的, 所以要在文件夹里面使用

  1. 告诉电脑, 我这个文件夹被 git 管理了
    git 安装以后, 不会管理你电脑上的任何一个文件夹
    必须要你告诉它, 这个文件夹被 git 管理, 他才会管理
    准备一个想要被 git 管理的文件夹,有两种方法:
    1-1. 打开命令行, 切换到这个文件夹目录里面(cmd) 输入指令:
    git init
    1-2. 直接打开文件夹, 在里面鼠标右键单击, 点击 git bash here
    执行完毕以后, 当前目录会多一个 .git 的文件夹(隐藏目录)
    当出现了 .git 文件夹以后, 当前目录及所有子目录都被 git 管理了
    变成了一个 git 的本地仓库(存储代码的仓库)

首先输入npm init -y ,生产默认的package.json文件。
在这里插入图片描述
随后再到终端输入git init 准备上传

在这里插入图片描述
在这里插入图片描述
2.准备我们的源文件夹src,随后在src里面建立好我们需要用到的一系列文件,如:css js pages lib images等
在这里插入图片描述
3.准备一个gulpfile.js文件夹,这里建议使用之前自己用过的,因为新建一个比较麻烦,所以我直接从了解gulp博文的源文件夹里面拉过来

链接:https://pan.baidu.com/s/1FD04bEl1-W9Pa-wpa9Gwww
提取码:llmc
在这里插入图片描述
4.准备一系列辅助包,因为一个一个下载比较麻烦,所以建议用之前下载好的包,具体下载步骤可以参考了解gulp博文,这里我也是直接把之前下载包的代码复制过来就可以了
在这里插入图片描述
注意:别把逗号落下!!

 "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0",
    "gulp-cssmin": "^0.2.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-uglify": "^3.0.2",
    "gulp-webserver": "^0.9.1"
  },
  "browserslist": [
    "last 2 versions",
    "iOS > 7",
    "FireFox < 20",
    "last 2 Explorer versions"
  ]

5.考虑到有些比较习惯用sass敲代码的读者,所以在这里添加了一项sass的打包方法
在这里插入图片描述
在这里插入图片描述
随后就可以下载这些第三方包了,在终端输入npm i,把之前用过的包都下载下来
在这里插入图片描述

然后在终端下载sass这个第三方包:npm i -D node-sass,
在这里插入图片描述
最后再下载一个sass压缩包就可以了。
在这里插入图片描述
6.在src源文件夹里面加入自己需要到的文件夹
在这里插入图片描述
7.下载自己需要到的第三方框架。这里我需要到的是jquery、swiper、[email protected]
在这里插入图片描述
8.把下载好的第三发框架和插件从node_modules文件夹一个个拉到lib文件夹

在这里插入图片描述
9.准备一个.gitignore文件夹,注意:是.gitignore文件夹,只有后缀名,没有名字。并且在文件夹里面写入node_modules。这个文件夹的主要作用就是在github上传文件的时候忽略node_modules文件夹不上传。
在这里插入图片描述
10.引入框架和插件
在这里插入图片描述
11.测试并检查,这样就把我们需要引进来的文件都引进来了。
在这里插入图片描述
在这里插入图片描述
11.检查工作目录和暂存区的状态,这里显红部分就是没有被管理的文件
在这里插入图片描述
12. git add . 添加到暂存区,把我们所有文件都添加到暂存区

在这里插入图片描述
13. git commit -m “注释”:把它提交到版本库在这里插入图片描述
14. 然后到自己的github里面新创一个创库,并且把地址复制下来放到git终端运行在这里插入图片描述
在这里插入图片描述
15.git push -u origin master:将本地的master分支推送到origin主机,同时指定origin为默认主机,后面就可以不加任何参数使用git push了。到这步的时候需要输入账号密码,如果第一次输错了,就重新上传再次输入。
在这里插入图片描述
这样,我们的项目就上传完毕了
在这里插入图片描述
GitHub源文件:https://github.com/win10000/xiaomi.git

家中逆战,无畏疫情,武汉加油,中国加油,人类必胜!!!

发布了11 篇原创文章 · 获赞 3 · 访问量 290

猜你喜欢

转载自blog.csdn.net/qq_43942185/article/details/104569016
今日推荐