React-Antd Pro环境搭建
1.Nodejs安装
nodejs 下载地址: https://nodejs.org/en/download/
![](https://img2020.cnblogs.com/blog/783110/202110/783110-20211001193205627-1560916240.png)
2.cnpm安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
![](https://img2020.cnblogs.com/blog/783110/202110/783110-20211001193139540-1585024218.png)
3.项目创建
使用UMI初始化脚手架
yarn create umi app ,app(项目名称)
![](https://img2020.cnblogs.com/blog/783110/202110/783110-20211001193258609-967975146.png)
选择typescript
![](https://img2020.cnblogs.com/blog/783110/202110/783110-20211001193447451-1277578122.png)
complete有演示数据和模板,这里选择Simple
![](https://img2020.cnblogs.com/blog/783110/202110/783110-20211001193508802-890669985.png)
最终生成后的项目文件目录,结构说明参考官网:https://pro.ant.design/zh-cn/docs/folder/
![](https://img2020.cnblogs.com/blog/783110/202110/783110-20211001193756922-704218241.png)
4.下载还原资源包
把package.json中的包下载到本地:
(1)cd 进入指定文件夹 创建项目,这里cd app
(2)输入tyarn,还原资源
安装等待中....
![](https://img2020.cnblogs.com/blog/783110/202110/783110-20211001193827636-1756944848.png)
安装完毕
![](https://img2020.cnblogs.com/blog/783110/202110/783110-20211001193910041-43188404.png)
安装完项目的依赖包之后,会看到多了文件夹node_modules
![](https://img2020.cnblogs.com/blog/783110/202110/783110-20211001193934273-1357310460.png)
5.项目运行
运行,在package.json中找到"start",即:npm run start
![](https://img2020.cnblogs.com/blog/783110/202110/783110-20211001194018175-1939806758.png)
其中,MFSU是分析工具,暂时忽略,访问本地8000端口
![](https://img2020.cnblogs.com/blog/783110/202110/783110-20211001194059582-261158406.png)
用VS Code打开项目,在终端运行npm run start,第二次启动速度会快很多
![](https://img2020.cnblogs.com/blog/783110/202110/783110-20211001194142926-2043798633.png)
输入用户名和密码,登陆首页:
![](https://img2020.cnblogs.com/blog/783110/202110/783110-20211001194254794-1283430153.png)
以上,仅用于学习和总结!