一、如何使用 git 在 GitHub 上创建一个项目

1. 新建一个项目

首先，在github上注册自己的账号，然后登录后，可以看到如下界面，是你的主页。点击右边的?号，选择第一个选项

2. 填写项目信息

此时我们正在创建一个项目。转跳到如下页面：

红色标注说明：

1. 项目名称
2. 项目描述
3. 公有还是私有。即是否给别人看
4. 是否创建md文件说明
5. 用户忽略一部分文件的文件
6. 是否添加开源证书

3. github项目创建完成，界面如下：

4. 点击如上的绿色按钮，有如下标红内容，点击右边的圆圈，复制链接。

备注：如果你不想用Clone with HTTPS出来的这个链接，可以选择切换Use SSH。个人感觉：使用上感觉没啥区别，只是走得协议不一样。

到了此步，线上就创建好了一个项目仓库。接下来将其和本地同步（即和我们自己的电脑）

二、本地电脑中，先创建一个React项目

//1. 创建后端，通过express 
$ mkdir be
$ cd be

($ npx express -e)无效的话，如下做：
$ npm init
$ npm install express --no-save


//2. 创建前端react项目

$ mkdir fe
$ cd fe

//react项目快速搭建
($ npx  create-react-app  my-app同下效果)
$ npx  create-react-app .
$ cd my-app
$ npm start

小Tips：一开始表姐是自己安装官网搭建，一开始用的npm，但是太慢，切换了淘宝源。然后发现用npx可以将各种安装依赖只在项目中临时创建，于是就改用了这个。后面发现还是yarn最快。

三、将本地文件和远程仓库同步

//1.从工作区提交暂存区  
$ git add . 提交所有改动的文件

//备注： 第一次使用时会提示输入以下内容：
$ git config --global user.email "you@example.com"
$ git config --global user.name "Your Name"

//2.暂存区到本地服务器
$ git commit -m "提交的注释"  暂存区到本地服务器
接着弹出填写：git账号和密码


//3.提交远程服务(本地连接远程)
$ git push origin master:提交远程服务(origin:远程服务器名称  master:主分支)
如果是主分支，只要git push就可以了
或者（
//本地同步远程
$ git remote add origin url
$ git pull origin 分支名 --allow-unrelated-histories
）

//查看是否连接成功
$ git remote -v


//4.更新（拉取下来）
$ git pull origin master : 更新

//5.上传代码
$ git push --set-upstream origin master
之后再重复上面1.2.3步

另：附上git常用命令

Git 本地操作
//1.	如何将远程仓库和本地进行相关的联系
Clone with https:每次提交远程服务器都需要用户名和密码--不常用
Clone with ssh：配置私钥（本地）和公钥（配置给githup）

//2.	克隆代码到本地$ git clone 仓库的url---第一次

//3.	查看状态：$ git status 对比本地和本地服务器的区别

//4.	创建分支
Git branch 分支名称   创建分支
Git checkout 分支名称  切换分支
Git branch 查看分支

//5.	Git commit  -am “提交的注释”  === git add .  git commit -m ””

//6.	版本：
$ git tag v1.0
$ git push origin v1.0

//7.	协作：

//8.	提交日志   $ git log 

//9.	$ git rm与$ git rm --cached

//10.	当我们需要删除暂存区或分支上的文件, 同时工作区也不需要这个文件了, 可以使用
$ git rm file_path
$ git commit -m 'delete somefile' 
$ git push

//.gitignore:忽略提交文件，忽略环境配置。

四、我的整个项目结构

src下新建文件夹
- pages
- components
- assets 
- actions,及下面还要新建一个api文件夹(因为表姐后面的数据请求写在的axtions里的)
- router
- utils
- actions
- reducers
- store
- hoc
- context
- server

五、配置组件库Ant Desigin

//安装
$ yarn add antd

其他：参考官网中的按需配置，表姐认为很详细了。

六、配置路径别名

npm中找customize-cra第三方包，找到其中的别名Alias,按照说明修改config-overrides.js 文件。

const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');

const path = require("path") //引入path模块
module.exports = override(
  fixBabelImports('antd', {
    libraryDirectory: 'es',
    style: 'css',
  }),
  addWebpackAlias({
      //别名：绝对路径（要写绝对路径，就要用到path模块，在上面引入）
    "@": path.join(__dirname, "src")
  }),
);

配置好了之后，重新启动项目

$ yarn start

使用时，如下：

import LayOut from "@/layout"; //如此使用路径别名

七、配反向代理

1. src目录下新建setupProxy.js文件

2. 安装方向代理插件

$ yarn add http-proxy-middleware -D

3. setupProxy.js内配置如下：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',   
    	createProxyMiddleware({
      	target: 'http://localhost:3000',
     	  changeOrigin: true,
    })
}
      
//小tips：最后$ yarn add运行，启动没问题就OK。

这样，一个react项目就创建好了。接下来就是写我们自己的项目代码了哦。下一篇我会继续为大家分享我的登录注册拦截及项目效果。如果喜欢这篇文章，关注我的头条号@职场大表姐，我会继续为大家分享更多相关内容。如果你有什么想法，可以留言告诉我哦^_^

#职场众生相##职场达人说#