【每天学一点-03】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目

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

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

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

 2、引入Antd组件

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

 3、安装依赖

 在控制台输入命令:yarn

 4、启动项目

 yarn start

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

 1、项目目录结构截图:

    

【每天学一点-03】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目_第1张图片

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

 3、umi配置文件:.umirc.ts  (官方文档:.umirc.ts官方文档)

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

 5、typeScript配置文件:tsconfig.json  (官方文档:tsconfig.json官方文档)

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

三、运行截图

 1、项目运行截图

 

【每天学一点-03】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目_第2张图片

四、工具版本

 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

你可能感兴趣的:(react,javascript,typescript,react.js,前端框架)