摘要：
对菜单进行数据整理 import { DesktopOutlined, FileOutlined, PieChartOutlined, TeamOutlined, UserOutlined, } from '@ant-design/icons'; import type { MenuProps } 阅读全文
摘要：
修改Home.tsx的内容：将主菜单的内容进行抽离，然后单独引入=>MainMenu import { Breadcrumb, Layout, Menu } from 'antd'; import React, { useState } from 'react'; import { Outlet } 阅读全文
摘要：
我们在Menu组件身上添加一个点击事件：对应的函数写一个回调函数：获取当前对象的e的身上的key, 这里其实不难看出e就是当前点击时的menu对象，我们这里获取的是e的key，对应上面定义的属性。 此时修改上面配置的参数为/page1 /page2 需要使用useNavigate和OutLet,Re 阅读全文
摘要：
注释掉App.tsx中的几个路由组件： 将Home.tsx中的代码使用ant Design网站中的布局进行替换 复制的代码如下： import { DesktopOutlined, FileOutlined, PieChartOutlined, TeamOutlined, UserOutlined, 阅读全文
摘要：
在src目录下新建2views文件夹，用来存放组件，这里我们新建2个路由组件Home About，如下所示： 创建好这两个路由组件之后，在src目录里面我们新建一个router路由文件夹，然后命名一个index.tsx的文件，里面写上如下： 这里我们需要修改main.tsx，这里就不使用App了，这 阅读全文
摘要：
使用命令引入UI组件库 npm install antd --save 使用命令安装ant的图标库 npm install --save @ant-design/icons ，注意这里的@后面是一个ant没有单词d! 配置Antd Design样式按需自动引入 npm install vite-pl 阅读全文
摘要：
ts中对于@符号指定的路径不支持，同时vite中也是不支持的，所以我们需要在vite.config.ts中进行指定配置，path是node中自带的一个模块这里爆红的原因是没有进行声明： 我们使用命令对path进行单独的声明之后就不会爆红了。 这样我们在引入的时候就可以直接使用@符号来代替点号了： 我 阅读全文
摘要：
安装scss样式依赖，使用命令 npm i --save-dev sass --dev 会将依赖安装在devDependencies=>开发环境的依赖。 我们在src目录下的assets下创建styles文件夹，然后创建文件global.scss全局的样式文件，里面写上文字选中，以及图片禁止拖动 最 阅读全文
摘要：
上一篇中，我们已经对项目的整体结构进行了搭建，现在需要对不需要的东西进行删除，最后留下这些东西。 现在需要对全部的样式进行清除，使用命令导入依赖：npm i reset-css 然后在main.tsx中进行引入，引入的位置必须要在这个上面 最后我们自己写的样式，以及UI组件之类的可以写的顺序必须是以 阅读全文
摘要：
搭建环境的时候，我们必须要先确保环境有node环境和npm环境，如下使用cmd命令 确保自己有了这两个环境之后我们就可以开始搭建项目，首先找一个文件夹，这个文件夹用来初始化当前环境，例如，我这里选择的是E盘的learn-react目录下：依次敲击一下命令： 选择的时候选择React和TypeScri 阅读全文