react18+antd5从0到1的后台管理系统（一）

搭建这个项目，完全是自我踩坑趟过来的，并且基于我的开发经验，让大家快速入门上手前端项目开发，并少走弯路。教程适合初学者，若有问题欢迎大佬及时提出！

在此声明：我是使用的vite搭建的项目，脚手架的不清楚

环境安装：

1. node安装
2. vite安装

一、基础安装

1.node环境安装

node.js是一个JavaScript运行环境，已经集成了npm包管理工具。npm主要用于管理node包的安装、更新、卸载等。

官方下载地址：

下载 | Node.js 中文网

安装教程网上搜索一大堆，我就不再阐述了

2.vite安装

vite被称为下一代的前端工具链，无论vue还是react我个人也比较喜欢使用vite，构建、打包速度都是很快，而且文档也比较详细。

vite文档地址：vite文档

至于安装教程还是直接度娘吧，我就不赘述了，下面开始正文。

二、创建react项目

1. vite创建项目命令

yarn crate vite
// 或者
npm create vite@latest

注意：需先安装vite才不会报错

使用任一指令来创建你的第一个项目！

我这边以yarn为例来执行一下：

输入yarn create vite 后 会提示你输入项目名称

选择所要创建的项目类型

继续选择语言类型，我这里使用的js

 创建成功后就出现下面这个样子了

跟着提示的指令敲，然后就可以看到你创建的一个react初始项目了

 三、目录介绍

项目根目录中的文件
先从进入项目根目录说起，也就是第一眼看到的文件(版本不同，可能稍有不同)\

vite.config.js：这个文件是vite的配置，如同vue的vue.config.js类似。

package.json: 这个文件是webpack配置和项目包管理文件，项目中依赖的第三方包（包的版本）和一些常用命令配置都在这个里边进行配置，当然脚手架已经为我们配置了一些了，目前位置，我们不需要改动。如果你对webpack了解，对这个一定也很熟悉。

yarn.lock：这个文件用一句话来解释，就是锁定安装时的版本号，并且需要上传到git，以保证其他人再yarn install 时大家的依赖能保证一致。

gitignore : 这个是git的选择性上传的配置文件，比如一会要介绍的node_modules文件夹，就需要配置不上传。

node_modules :这个文件夹就是我们项目的依赖包，到目前位置，脚手架已经都给我们下载好了，你不需要单独安装什么。

public ：公共文件，里边有公用模板和图标等一些东西。

src ： 主要代码编写文件，这个文件夹里的文件对我们来说最重要，都需要我们掌握。

public文件夹介绍
这个文件都是一些项目使用的公共文件，也就是说都是共用的，我们就具体看一下有那些文件吧。

favicon.ico : 这个是网站或者说项目的图标，一般在浏览器标签页的左上角显示。

src文件夹介绍
这个目录里边放的是我们开放的源代码，我们平时操作做最多的目录。

main.jsx : 这个就是项目的入口文件。

index.css ：这个是main.js里的CSS文件。

App.jsx : 这个文件相当于一个方法模块，也是一个简单的模块化编程。

四、项目搭建

1.配置环境变量

  vite 提供了开发模式和生产模式

  这里我们可以建立 3 个 .env 文件，一个通用配置和两种环境：开发、生产。

• .env文件 通用配置 用来配置一些公用的
• .env.dev文件 开发环境配置
• .env.prod文件 测试环境配置

 

// .env

VITE_APP_TITLE=Hello

VITE_APP_PROXY_URL=https://next.bspapp.com/server


// .env.dev

VITE_APP_ENV = development

VITE_APP_PROXY_URL=https://next.development.com/server


// .env.prod

VITE_APP_ENV = production

VITE_APP_PROXY_URL=https://next.production.com/server

命令行界面可以写成

 

2. 配置alias别名 @

配置别名 像vue cli一样 以@引入文件

如果path或者__dirname报红，需要安装支持@types/node到本地 npm i @types/node -D

vite.config.js

 

 

配置了@别名之后去引入文件发现没有智能提示，需要根目录添加一个jsconfig.json文件

如果遇见报错就重启一下编辑器

配置了过后的测试

3.安装Ant design，并使用

使用 npm 或 yarn 安装

推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

npm install antd --save
// 或者
yarn add antd

 等到安装完成后可以直接使用

展示效果

 

 

 这一章就到这里结束，以免内容太多，消化不了，下一章描述路由以及状态管理