【每天学一点-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
搜索
复制
【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目的更多相关文章
- 如何搭建一个基于nuxt.js的项目
介绍 nuxt.js(中文官方文档)是vue.js的一个通用型应用框架,有了之前搭建vue项目的过程之后,搭建一个nuxt项目就会十分简单. 搭建步骤 1.打开命令提示符,进入到相关文件夹下: 2.使 ...
- 利用VUE-CLI脚手架搭建VUE项目
前言 在学习完vue基础语法之后,学着利用vue-cli脚手架搭建一个项目,本篇随笔主要记录搭建的过程,供大家一起学习. 具体内容 搭建vue项目的准备工作 1.安装Nodejs.NPM以及VSCod ...
- 如何在ASP.NET 5上搭建基于TypeScript的Angular2项目
一.前言 就在上月,公司的一个同事建议当前的前端全面改用AngularJs进行开发,而我们采用的就是ASP.NET 5项目,原本我的计划是采用TypeScript直接进行Angular2开发.所以借用 ...
- 利用yeoman快速搭建React+webpack+es6脚手架
自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些 ...
- react脚手架搭建1
23:01:17 react脚手架搭建 (个人用的是webstorm,所以分享下webstorm中的创建react脚手架项目的方法) 1.创建新项目(前提是下载nodejs环境) 2.下载好在webs ...
- react-native —— 在Windows下搭建React Native Android开发环境
在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...
- 前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例
使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基础与模块化的内容再使用vue-cli开发 ...
- 快速搭建react项目骨架(按需加载、redux、axios、项目级目录等等)
一.前言 最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
随机推荐
- Resource wordnet not found. Please use the NLTK Downloader to obtain the resource:
第一次使用nltk的时候,出现了这样的错误: from nltk.stem.wordnet import WordNetLemmatizer lemmatizer = WordNetLemmatize ...
- 第一个Python程序 | 机选彩票号码+爬取最新开奖号码
(机选彩票号码+爬取最新开奖号码 | 2021-04-21) 学习记录,好记不如烂笔头 这个程序作用是<机选三种彩票类型的号码> 程序内包含功能有如下: 自动获取最新的三种彩票的开奖号码 ...
- k8s系列--node(k8s节点介绍,新增节点,移除节点)
一.简介 Node是Pod真正运行的主机,可以是物理机也可以是虚拟机. Node本质上不是Kubernetes来创建的, Kubernetes只是管理Node上的资源. 为了管理Pod,每个Node节 ...
- 通过python将阿里云DNS解析作为DDNS使用
通过python将阿里云DNS解析作为DDNS使用 脚本需要Python2.x运行 安装alidns python sdk sudo pip install aliyun-python-sdk-ali ...
- 使用虚拟机在3台centos7系统安装docker和k8s集群
一.安装docker 环境:准备3台centos7系统,都安装上docker环境,具体安装步骤和流程如下 参考: https://docs.docker.com/install/linux/docke ...
- cpulimit-限制CPU速率
CPULimit是一个简单的程序,它可以限制指定进程的CPU百分比. 1.安装依赖 root@localhost:~# apt-get -y install git 2.从GitHUB中克隆源码到本地 ...
- Vue基础篇之 插槽 slot
- 【freertos】010-消息队列概念及其实现细节
目录 前言 10.1 消息队列概念 10.2 消息队列的数据传输机制 10.3 消息队列的阻塞访问机制 10.4 消息队列使用场景 10.5 消息队列控制块 10.5.1 队列控制块源码 10.5.2 ...
- Apache Shiro反序列化漏洞(Shiro550)
1.漏洞原理: Shiro 是 Java 的一个安全框架,执行身份验证.授权.密码.会话管理 shiro默认使用了CookieRememberMeManager,其处理cookie的流程是:得到rem ...
- [二进制漏洞]栈(Stack)溢出漏洞 Linux篇
目录 [二进制漏洞]栈(Stack)溢出漏洞 Linux篇 前言 堆栈 堆栈(Stack)概念 堆栈数据存储方式 函数调用 函数调用C语言代码 函数调用过程GDB调试 函数Call返回原理 函数栈帧 ...