- 新建一个项目
首先，在github上注册自己的账号，然后登录后，可以看到如下界面，是你的主页。点击右边的➕号，选择第一个选项
- 填写项目信息
此时我们正在创建一个项目。转跳到如下页面：
红色标注说明：
- 项目名称
- 项目描述
- 公有还是私有。即是否给别人看
- 是否创建md文件说明
- 用户忽略一部分文件的文件
- 是否添加开源证书
- github项目创建完成，界面如下：
- 点击如上的绿色按钮，有如下标红内容，点击右边的圆圈，复制链接。
备注：如果你不想用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
//安装
$ 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"; //如此使用路径别名
- src目录下新建setupProxy.js文件
- 安装方向代理插件
$ yarn add http-proxy-middleware -D
- 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项目就创建好了。接下来就是写我们自己的项目代码了哦。下一篇我会继续为大家分享我的登录注册拦截及项目效果。如果喜欢这篇文章，关注我的头条号@职场大表姐，我会继续为大家分享更多相关内容。如果你有什么想法，可以留言告诉我哦^_^
#职场众生相##职场达人说#
,
