一、使用脚手架搭建项目框架

　1、首先使用脚手架搭建React项目(React+TypeScript+Umi.js)

　在控制台输入命令：yarn create @umijs/umi-app

　2、引入Antd组件

　在控制台输入命令：yarn add antd

　3、安装依赖

　在控制台输入命令：yarn

　4、启动项目

　yarn start

二、项目目录与配置文件介绍

　1、项目目录结构截图：

　2、主要核心代码目录：/page

　3、umi配置文件：.umirc.ts　　（官方文档：https://umijs.org/zh-CN/config）

　4、包依赖配置文件：package.json　　

　5、typeScript配置文件：tsconfig.json　　（官方文档：https://www.tslang.cn/docs/handbook/tsconfig-json.html）

　6、项目访问地址：http://loaclhost:8000　　或者　　http://192.168.32.163:8000

三、运行截图

　1、项目运行截图

　

四、工具版本

　1、Visual Studio Code：1.67.2　　- 开发工具

　2、node：16.14.0

　3、npm：8.3.1

　4、react：17.0.0

　5、react-dom：17.0.0

　6、typeScript：4.1.2

　7、umi.js：3.5.24

　8、antd：4.20.7

搜索

复制