【每天学一点-04】使用脚手架搭建 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、项目目录结构截图:

    

 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

 

 

posted @ 2022-06-05 10:38  卡鲁耶克  阅读(303)  评论(0编辑  收藏  举报