从零开始搭建React+TypeScript+webpack开发环境-集成antd ProComponents

已于 2024-04-19 19:35:50 修改
阅读量1.1k 收藏 1
点赞数 12
CC 4.0 BY-SA版权
分类专栏： 基于webpack的React开发实战教程 文章标签： react.js typescript ant design
于 2023-11-12 19:22:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41908433/article/details/134364103
本文详细介绍了如何使用AntDesignProComponents库创建中后台应用的布局，包括ProLayout和PageContainer的使用，以及如何结合登录功能，实现用户权限管理和导航。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

Ant Design 定义了基础的设计规范，对应也提供了大量的基础组件。但是对于中后台类应用，提供更高程度的抽象，提供更上层的设计规范，并且对应提供相应的组件使得开发者可以快速搭建出高质量的页面。

在 ProComponents 中内置了一系列的设计规范，预设了常用的逻辑。在这个基础上提供了灵活的支持，比如对于 ProTable 来说你也可以把它完全当做 Ant Design 的 Table 来用，对于 ProForm 来说你也可以直接使用 Ant Design 的基础组件或者你的自定义组件。我们希望通过 Pro 系列组件提供快速高效搭建高质量中后台应用的能力，进一步扩展 Ant Design 的能力，欢迎使用并提出宝贵的意见。

安装依赖

yarn add @ant-design/pro-components

使用ProLayout创建后台管理页面

ProLayout 可以提供一个标准又不失灵活的中后台标准布局，同时提供一键切换布局形态，自动生成菜单等功能。与 PageContainer 配合使用可以自动生成面包屑，页面标题，并且提供低成本方案接入页脚工具栏。

创建

了解本专栏 订阅专栏 解锁全文 超级会员免费看
从零开始搭建React+TypeScript+webpack开发环境-嵌套路由表
断线的风筝
10-30 919
【代码】从零开始搭建React+TypeScript+webpack开发环境-嵌套路由表。
从零开始搭建React+TypeScript+webpack开发环境-使用iconfont构建图标库及图标选择器
断线的风筝
11-04 580
当开发者构建用户界面时，图标选择器成为一个重要的工具，它们允许用户通过直观的方式为应用程序或网站选择合适的图标。图标不仅仅是页面设计的一部分，更是用户交互的关键元素之一。通过提供一个图标选择器，用户可以轻松地浏览和选择适合其需求的图标，而无需深入研究图标的名称或使用复杂的代码。图标选择器的必要性在于简化用户体验，提高开发效率，并确保应用程序的一致性和专业外观。它们使开发者能够更容易地集成高质量、一致性的图标，而无需花费大量时间在图标的选择和集成上。
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模板 |--
Webpack: 搭建 React 全栈开发环境
Wang的专栏
06-26 1210
传统 Web 开发强调样式、结构、逻辑分离，以此降低技术复杂度。但 React 认为渲染逻辑本质上与其它 UI 逻辑存在内在耦合关系，所以提倡将结构、逻辑与样式共同存放在同一文件中，以“组件”这种松散耦合结构实现关注点分离，并为此设计实现了一套为支持这一特性，我们需要搭建一套使用的工程化环境，将 JSX 及 React 组件转换为能够在浏览器上运行的 JavaScript 代码。使用Babel处理JSX文件使用运行 React 应用。
手搓React + Webpack + Typescript + Less
最新发布
D_xw_的博客
07-11 823
本文详细介绍了手动创建React项目的完整流程。首先通过npm init初始化项目，安装React、Webpack、TypeScript、Babel和Less等核心依赖。接着配置目录结构，创建必要的项目文件和配置（webpack.config.js、tsconfig.json、.babelrc）。文章重点展示了Webpack配置细节，包括开发服务器设置、各类文件loader配置以及HTML模板处理。最后通过编辑入口文件、组件和HTML模板完成项目搭建，并提供了npm run build和npm start命
React+Antd+TypeScript 开发规范
曹焱的博客
09-19 5242
React+Antd+TypeScript 规范整合 1.TypeScript代码标准化规则 提取出部分适用于项目中的官方要求的的TypeScript用于约束贡献者的编码规范 [typescript官方规范] 出自：深圳市伙伴行网络科技有限公司 编辑：前端开发-毛昱宇 (https://zhongsp.gitbooks.io/typescript-handbook/doc/w...
使用Webpack搭建自己的React项目----1
qq_30483517的博客
04-09 623
使用Webpack搭建自己的React项目--持续更新创建项目基础代码配置webpack运行项目 React 和 Webpack在前端峡谷里可是两位扛耙子的基友了。他们相爱相杀。React官方已经为大伙提供了create-react-app开箱即用。如果是小项目或者是想自己折腾，就需要咱们(提供一块肥皂)提供基于react的webpack配置。废话不多说，下面的教程有眼睛就能学废会。 github...
React+Webpack+babel项目搭建
10-29
React+Webpack+Babel项目搭建，适合新入坑的同学们学习。
【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile
aoliei的博客
03-17 2288
一、通过create-react-app脚手架创建项目 npx create-react-app testproject --template typescript 在vscode中打开项目，可以看到顺利生成了react项目且组件的后缀为tsx,此时说明成功创建了react+typescript项目的雏形 在项目根目录下，运行npm run start，成功启动项目 npm start 二、配置路由 npm i react-router-dom@5.2.0 react-ro..
React And TypeScript（一：基本环境+集成antd）
热门推荐
JUSTIN的博客
01-09 1万+
前言 上东家前端pc项目是15年的React+Flux，当然架子肯定是其他大牛搭建的。本司刚刚最近才有新版pc的需求（ps：之前只要个静态pc和mobile页面, 简单搭建webpack@3打包文件），所以需要重新搭建一个pc。想来想去，angularjs太重，没人用它做pc，不合适；vue，算了吧，文档都不知道长什么样子；jquery，用它估计也是想找死。最后技术定位到React+ React...
2022升级 React18+TS高仿AntD从零到一打造组件库
09-02
2022升级 React18+TS高仿AntD从零到一打造组件库课程
使用webpack5从0到1搭建React+TypeScript 项目环境
RayLyu0829的博客
01-07 832
记录一下自己使用 webpack5从0到1搭建React+TypeScript 项目环境。
TypeScript 开发环境搭建
万物可编码
12-07 1566
学习如何搭建一个TypeScript开发环境，开始写一个Hello World TypeScript程序并运行
搭建TypeScript开发环境
richest_qi的博客
06-09 322
TypeScript是JavaScript的一个超集，它扩展了JavaScript，还添加了类型。 TypeScript不能被JS解析器直接执行，需要将TypeScript编译为JavaScript。 index.js index.ts编译生成的index.js，如下，
TypeScript环境搭建
Zhouy2的博客
09-04 466
1、安装node环境 进入nodejs官网（http://nodejs.cn），下载最新版的nodejs包，进行安装。 安装好之后，打开命令行模式（快捷键win+R，输入cmd打开即可） 使用node -v命令查看nodejs版本号，出现则代表已安装完成 使用npm -v命令查看npm版本号 2、安装TypeScript包 在命令行窗口输入如下命令安装 npm install typ...
测试开发【Mock平台】17开发：Antd高级模板组件ProComponents
测试开发转型之旅上的小学生
02-27 1481
【Mock平台】为系列测试开发教程，从0到1编码带你一步步使用Spring Boot 和 Antd React框架完成搭建一个测试工具平台，希望作为一个实战项目对各位的测试开发学习之路有帮助，关注公众号发送“mock”获取github项目源码地址，大奇一个专注测试技术干货原创与分享的家伙。升级好最新前端框架后，让我们回到Mock服务前后端的配置服务开发中，最开始我们已经学会了Antd pro的中后台框架的创建，以及使用Ant Design组件进行布局式开发前端页面。
Antd ProComponents的使用
muou_hang的博客
07-30 5242
Antd ProComponents的使用 Antd封装了大部分我们前端常用的组件，但过于零散，需要前端开发的同学自行封装。而很多场景下，我们需要的组件往往是集成的，譬如后台管理系统的框架大部分功能是统一的。在此基础上，我们可以使用Antd封装好的ProComponents进行日常开发。官网地址 Antd ProComponents。 下图是ProComponents封装好的组件模板库，值得一提的是，pro按照不同的组件进行了单独的封装，因此可以按需引入。在开发中 我们用的比较多的一般是ProLayout和
通过webpack从零开始搭建React项目
knowledge_bird的博客
04-26 4114
从零开始搭建React项目 1. Webpack基础概念 webpack主要作用： 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功...
react项目搭建webpack
qian_li_hui的博客
08-24 302
react项目搭建webpack从无到有
从零开始构建React+TypeScript在线商城教程
项目构建步骤涵盖了从零开始到具备基本功能的全过程。" 知识点详细说明： 1. **React 和 TypeScript 的结合**： - React 是一个用于构建用户界面的 JavaScript 库，它采用声明式的方式，通过组件化思想让开发者...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈探索者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值