搭建react项目教程（一）

一:环境安装

1：背景

本项目使用reactjs的create-react-app 作为脚手架，使用ant-design为ui框架。本项目基于node运行，搭建项目前请自行安装并配置环境变量。（安装过程略）

2：包管理工具

安装完node之后，node自带的npm包管理工具可以使用，但是使用的国外镜像某些时候比较慢，所以建议切换为yarn包管理工具。打开终端执行以下命令：
// 安装yarn
npm install -g yarn
// 切换为淘宝的源
yarn config set registry ‘https://registry.npm.taobao.org’

二:开始搭建

1:搭建过程

1：在以上环境搭建完成后，打开ant-design官方网站，https://ant.design/docs/react/introduce-cn，点击菜单栏 在 create-react-app 中使用，根据页面上的步骤操作。打开终端并切换到项目需要存储的路径（如需要放在D盘下， cd D:）,执行命令
yarn create react-app antd-demo
接下来终端上打印一系列信息，等待几秒钟，显示完成。可以打开该项目，并执行启动命令 yarn start，浏览器上localhost:3000 上显示页面就完成了。
本机执行时遇到以下错误：

根据提示应该是缺少 Web Vitals包，我们执行以下命令安装
npm i web-vitals --save-dev
安装完毕后，再次执行启动命令


启动成功。

2：项目描述

2.1 命令概述
//启动项目 本地可以localhost:3000 访问react项目，默认端口3000
yarn start
// 打包项目 执行改命令后，在src同级目录下会生成build文件夹，部署时配合nginx指向此目录即可。
yarn build

2.3 命令相关的参数可以在package.json里面找到,如图所示

2.4 加入antd
yarn add antd