react+antd+vscode的运行环境搭建

初学者，在学着做一个前端项目，有时候要换新电脑，或者重装系统，前端代码就不能用了，解决时候总是忘记还遇到麻烦，记录一下。按步骤来吧，也不知道对不对，先这样用着。

1.下载vscode 

就去官网下就完事

好像点下载会根据电脑的系统版本位数啥的下载相应的版本，反正我点最大的最后配成功的几个电脑都没啥问题。

安装好像没啥问题，一路点应该就行了，它软件默认的设置应该就行

注意：1.安装的时候有一个

 这俩好像是没默认勾选，记得勾选一下，这个是为了用vscode可以这样打开文件,

 这个不选问题也不是大，就是方便点，然后按部就班安装好像没啥问题。

然后进去以后把先把扩展下了

中文语言包，还有我自己常用的东西（有的是主题，还有括号颜色啥的，还有些我也不知道干啥用的，但是第一个电脑下了这些，后来为了保持一致，也都下了，我的原则是能不乱动就不乱动！）

重启一下就有中文了，然后vscode就小告一段落。

2.node.js

Node.js 就是运行在服务端的 JavaScript。是一个基于Chrome JavaScript 运行时建立的一个平台。要是做网页开发啥的也得把这个下了。

就去官网下载就行了。

然后也是按部就班的装上就行。

提示一下，这个node和vscode都可以不装到C盘里，可以正常使用，别把C盘装多了。

然后装好了以后，比较重要的一点就是需要去命令提示符里去检查一下node装上没。

主要就是查看node,和npm

要是这儿没有的话，就得停下了，去重新装一下node看看是哪里的问题（比如安装的时候是不是不小心取消了某些默认勾选安装的内容）

这部分内容也就结束了。

 3.Git安装以及配合vscode

这个还是就去官网下载就行了，安装的时候改一下路径，别的基本上一路默认就行，不放心就去查查它详细教程，但基本上不用修改。

 安装成功后就有了开始栏的Git Bush，点开这个，开始设置名字和邮箱

$ git config --global user.name "设置你的名字英文（例：caiji)"
$ git config --global user.email 111111@qq.com

这儿就OK了。

然后给新电脑添加一个公钥，这样推送拉取的时候不用老是输入用户名密码啥的。

生成/添加SSH公钥 - Gitee.comhttps://gitee.com/help/articles/4181#article-header0

这里直接插入官方的教程说明了，十分清晰了已经是。然后添加好了以后。就可以联合Vscode使用了 。

使用方式

新建一个文件夹，右键使用code打开，在顶部新建终端，然后开始clone之前的项目。

回车键等待加载，然后这样项目就加入到文件夹里了。而且这个文件夹也被git接管了。

在这里就可以进行代码的拉取和提交。

Git操作详解以及在VScode中的使用 - 知乎 (zhihu.com)https://zhuanlan.zhihu.com/p/276376558这块儿原理和使用介绍可以在这里参考。这里的工作也完成了。

4.安装依赖

现在需要的就是手动/自动去安装依赖了。有的内容需要手动添加。

首先若想使用安装依赖的时候使用npm有时候十分的慢，因为连接的是外网路，建议使用cnpm用国内淘宝镜像，也就是cnpm。

npm install -g cnpm --registry=https://registry.npm.taobao.org

在vscode终端里输入这个，就可以安装cnpm了，此时要想安装什么依赖就可以使用。

cnpm install XXXXX相应的依赖包

然后安装yarn，这个启动项目，还有安装依赖比较好用。使用如下命令

cnpm install --global yarn

然后

yarn --version

查看yarn 版本检查安装上没有，这时候会出现两种报错可能，使得你看不到yarn --version。

1.你vscode打开的项目文件夹不是最内层文件夹

比如说程序在文件夹A里，文件夹A在文件夹B里，如果Vscode打开的文件夹是B，就无法正常运行，必须Cd到A里，或者直接重新打开一下A。

2.电脑不允许执行脚本。

解决方式，在启动栏搜索powershell

以管理员身份运行，输入

get-executionpolicy

查看当前什么模式。

如果是Restricted ，就要修改。输入 

set-ExecutionPolicy RemoteSigned

更改执行官为RemoteSigned，此时会给你一个提醒（绿色框）选择 “Y” 就行。

改完以后就可以使用yarn了。

5.使用antd

yarn add antd

加载之后就有相关的antd依赖了。

我的项目用到了地图，还需要添加一下其他的，用不到就不用这步了。

npm install -g increase-memory-limit  
increase-memory-limit
npm install -g increase-memory-limit
yarn add leaflet-ant-path
yarn add i @geoman-io/leaflet-geoman-free
yarnpkg add @umijs/preset-react

然后都结束了以后

yarn
yarn start

就可以顺利运行出来了！