React-18搭建后台管理 Vite+TS+AntdesignUI -02

已于 2023-04-27 15:18:42 修改
阅读量256 收藏 1
点赞数
文章标签： react.js 前端 javascript
于 2023-04-27 15:15:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72393122/article/details/130396726
版权
文章介绍了如何安装最新版的react-router-dom并采用@6版本。在组件方式下，主要步骤包括在Main.js中用Router组件替换App组件，使用Outlet作为路由内容占位符，以及通过Link进行页面间的导航。此外，文中也提及了类似Vue的路由表写法，指出这两种方式在实际开发中都有应用。
摘要由CSDN通过智能技术生成

路由的搭建 -- 第一种写法  组件方式的写法

  • 安装路由最新版，用的是@6版本的npm install react-router-dom
  • 以下就是组件式写法，还有一种是跟vue一样的路由表写法，两者在日常开发中都可能遇到，所以都说一下

  •  具体实现

  • 在Main.js中注释掉App组件 换成我们导出的Router组件
  •  在App组件中展示我们定义的路由组件需要引入专门的占位符Outlet通过Link可以点击跳转
  • 这样在地址栏可以通过切换转到

 

皮蛋没有保质期
关注
react18 + vite5 + typeScript + commitLint + prettier + eslint + husky + lintStaged 实现后台管理系统基本框架
小白小白从不日别的博客
06-04 234
npm run eject：项目中的一些配置被隐藏起来了，通过这个命令可以将配置文件反编译到项目中，从而获得配置的权利，这个操作是不可逆的，一旦编译出来就无法编译回去，一般来说不会执行这个命令，我们会通过其他方式去修改配置。：React18 引入了并发模式，Zustand 设计为响应式的状态管理库，可以很好地兼容 React18 的并发特性，确保应用的状态管理在并发模式下仍然稳定和高效。：Zustand 采用了最小的 re-render 策略，只会在状态实际变化时触发组件重新渲染，避免了不必要的性能开销。
React-18搭建后台管理 Vite+TS+AntdesignUI -01
m0_72393122的博客
04-26 698
React-18搭建后台管理 Vite+TS+AntdesignUI -01
react-antd-ts-admin:react + antd + typescript的后台管理系统
03-11
项目简介 基于React+AntD+TypeScript的后台管理系统 技术依赖 React-（UI框架） 蚂蚁设计-（组件库） TypeScript-（静态类型） Webpack 轴距 较少的 功能 登录/退出 全屏浏览 一键换肤 个人中心 侧边菜单 标签快捷导航 图标 表单 表格 图表 折线图 面积图 柱状图 条形图 饼图 散点图 地图 标签选项卡 发布/导出Excel 用户管理 文章管理 创建文章 文章列表 草稿箱 垃圾箱 发布 头像上传 文件上传 错误处理 403 404 组件 可编辑的树 项目截图 目录结构 |-- config webpack配置文件 |-- dist webpack构建目录 |-- docs 文档 |-- public html模板 |--
React-18搭建后台管理 Vite+TS+AntdesignUI -04 侧边栏布局
m0_72393122的博客
04-27 424
React-18搭建后台管理 Vite+TS+AntdesignUI -04 侧边栏实现
开源项目推荐：React18、TS、Vite、Antd5 开箱即用的中后台前端项目
最新发布
LuckyWinty的博客
06-27 77
点击上方前端Q，关注公众号 回复加群，加入前端Q技术交流群近期发现很多小伙伴的简历难以区别于其他人，项目比较单一。比如有小伙伴没接触过小程序开发、脚手架开发、图片编辑器、数据大屏等开发。我一般都是建议多找找一些开源项目，学习掌握透彻后，也可以参与贡献代码，可以写到简历上（如果公司想招有类似项目经验的就会加分）。github上有很多开源项目，平时多积累学习，真正需要时，不至于束手无措。后续也会多...
React18 后台管理模板项目：现代、高效与灵活
wangyuiba1314的博客
03-15 1244
🎉 给大家推荐一款React18+Typescript+Vite+zustand+Antd+unocss且超级好用的中后台管理框架。
react-antd-admin:react + ts + antd实现的管理系统模版
03-11
基于react + ts + antd建立的管理后台脚手架模版 线上地址 git地址 单独使用 详情请查看 1.配置抽屉 1-1。可缓存系统配置 记录用户使用的系统配置，缓存浏览器中，记录用户习惯。 1-2.antd换肤（Layout组件未封装）...
基于React18、React-Router V6、Redux Vite2、Ant-Design 开源的一套后台管理框架
11-04
Hooks Admin 是一个全面的后台管理框架，它充分利用了React18、React-Router V6、Redux、React Hooks、TypeScript以及Vite2等现代前端技术，同时采用了流行的Ant Design UI库，为开发者提供了高效且易用的开发环境。...
React-18搭建后台管理 Vite+TS+AntdesignUI -03
m0_72393122的博客
04-27 559
React-18搭建后台管理 Vite+TS+AntdesignUI -03 路由表和懒加载
react-vite-ts
04-05
这是一个vite2＆React17＆Typescript演示 去做 集成Redux ，或者使用封装过的 约定式路由 还记得吗，在Vite中，如果想按需加载，可以使用这个插件： ，现在已经支持Vite 2了 less换成scss Production Mode ， SSR ，参照官网配置即可，遇到什么坑可以一起讨论
React项目 管理后台页面框架搭建
quitv的博客
08-07 1483
使用 antd 这个框架搭建 使用 Layout 进行页面布局 在文件夹 component 创建一个新的组件 叫做Frame ,然后里面在创建一个叫做index.js ,这是我们管理后台的一个大的布局结构 在index.js 里添加代码 ，首先在antd 找到合适的布局，然后把代码粘贴过啦，这里我使用的是 把Layout 里面的内容引入 import { Layout, Menu, Breadcrumb, Icon } from 'antd'; const { SubMenu } = Menu;
【React】Vite创建React+TS项目
owo_ovo的博客
03-15 3802
【React】Vite创建React+TS项目
Vite搭建react+ts项目
YYTX_YS的博客
05-26 831
vite搭建react项目并配置ts环境
Vite 创建 React + TS 项目（完整）
m0_54158068的博客
02-25 1070
Vite 创建 React + TS 项目（完整）
react+ant.design——后台管理系统
jjsnc
04-01 1896
从零开始搭建课程
如何使用React 18和TypeScript来构建中后台管理系统
2301_77814370的博客
06-14 257
React是一种流行的JavaScript库，用于构建用户界面。React 18是React的最新版本，支持一些新的特性，如异步渲染和新的编写组件的方式。TypeScript是一种静态类型系统，能够提高代码的可读性和可维护性。在这篇文章中，我们将介绍如何使用React 18和TypeScript来开发中后台管理系统。
react+vite+ts+antdesign项目搭建-20220802
m0_49827178的博客
07-27 4591
react+vite+ts+antd项目搭建
vite + react + ts 手摸手做项目系列一 （项目配置篇）
Web面试那些事儿的博客
01-11 1671
说好的教程终于来了，文章主要带大家打造一个 react spa 的项目，使用的技术栈是 vite+react+ts,vite 的快想必我就不用介绍了，用过的都说好， react + ts 已经成为大型项目的主流，大厂极为青睐，所以学好 react + ts 对你之后想进大厂应该会如虎添翼，本项目会有严格的规范性，eslint 规范，stylelint 规范，ts 类型规范，git 提交规范，包括打包上线体积分析，性能分析，以及何如做项目的想能优化。
搭建react项目 搭建ts react项目 使用vite搭建react项目
twinkle的博客
01-21 3036
创建react 项目 注意： 网上有一些生成react 的方法，但是也有一些是过时的。 使用官方脚手架creact-react-app 全局安装 creact-react-app 这个脚手架 这个脚手架和 vue 的 vue-cli是一样的，都可以全局安装，命令： npm install -g creact-react-app , 安装好了后，直接使用 create-react-app <项目名> 就可以创建一个react 项目了 直接使用npx npx create-react-app
vite+react搭建管理后台
09-17
Vite React是一种快速的脚手架工具，可以用于构建管理后台应用程序。搭建管理后台使用Vite React可以按照以下步骤进行： 1. 安装Node.js和npm：首先需要安装最新版本的Node.js和npm。 2. 创建项目目录：使用命令行进入到要创建项目的目录，并执行以下命令创建一个新的Vite React项目： ``` npx create-vite@latest your-project-name --template react-ts ``` 3. 进入项目目录：使用命令行进入到新创建的项目目录： ``` cd your-project-name ``` 4. 安装依赖：执行以下命令安装项目依赖： ``` npm install ``` 5. 启动项目：执行以下命令启动项目： ``` npm run dev ``` 6. 编写管理后台页面：在项目的src目录下，可以创建和编写各个管理后台页面的React组件。 7. 配置路由：使用React Router等路由库进行路由配置，将不同的页面组件进行路由关联。 8. 添加状态管理：使用Redux、MobX等状态管理库进行全局状态管理，方便在各个页面间共享数据。 9. 添加样式：可以使用CSS模块化、Less、Sass等方式添加样式，使管理后台具有良好的界面表现。 10. 打包上线：使用以下命令进行项目打包： ``` npm run build ``` 打包完成后，将生成的dist目录中的文件部署到服务器上即可。 以上是使用Vite React搭建管理后台的大致步骤，具体实现过程可以根据项目需求进行调整和扩展。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值