ant、react

最新推荐文章于 2025-10-30 11:05:40 发布
原创 最新推荐文章于 2025-10-30 11:05:40 发布 · 419 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

1、在routers文件夹添加一条路由，路由中将路由名字和组件名字对应

2、在components文件夹中添加一个组件，组件需要使用布局layout

3、在组件对应的路由文件中绑定一个model,这个是分配给他的数据，model有一个名字

4、在models文件夹中创建组件对应的model文件

5、将最外层reoutr.js导入到index.js中

6、在index.js中按照model的名字分配对应的数据

7、路由改变的时候就可以切换组件，同时往组件对应的model中放数据让组件显示

8、未完。。。

Vite + React + Ant Design配置指南
小白菜的博客
06-30 1091
本文旨在为前端开发者提供一份完整的Vite + React + Ant Design配置指南，涵盖从项目初始化到生产环境优化的全流程。Vite的优势和特点React项目的基本配置Ant Design的集成和按需加载项目优化技巧核心概念介绍：Vite、React和Ant Design项目初始化与基础配置Ant Design集成与主题定制项目优化与生产环境配置常见问题解答Vite：下一代前端构建工具，提供极速的开发服务器启动和热更新React。
React学习六（Ant Design of React）
qq_44872688的博客
03-17 2390
文章目录一、特性二、使用过程1、安装2、antd引用三、antd的组件库1、Button按钮       antd 是基于Ant Design设计体系的 React UI 组件库，主要用于研发企业级中后台产品，来自于“蚂蚁金服”。 一、特性 ①提炼自企业级中后台产品的交互语言和视觉风格。 ②开箱即用的高质量 React 组件。 ③使用 TypeScript 开发，提供完整的类型定义文件。 ④全链路开发和设计工具体系。 ⑤数十个国际化语言支持。 ⑥
React之使用antd组件
学习笔记
09-04 2656
进入网页点击组件就可以看到网页需要的各种配件，如按钮、导航栏等等，并且配有各种使用方法的API，目前已经更新到4.22版本，原本是只支持react不过后来也支持vue了。antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。antd还可以更改主题颜色，按需引入组件的css，不过得小小操作一下，以后需要了再来补。进入组件选一个比较好看的组件，比如我觉得这个导航栏不错。然后选择js的代码，copy到App组件就行了。终于，ul设置一下就可以了。
React+Ant Design后台管理系统模板实战项目
最新发布
weixin_34413326的博客
10-30 576
随着前端技术的快速发展，企业级后台管理系统对开发效率、可维护性和界面一致性提出了更高要求。React-ant-Webkit作为一个基于React框架构建的企业级中后台解决方案，旨在与Vue-Element-Webkit项目形成技术栈互补，在保持完全一致视觉表现和交互体验的前提下，提供一套面向React生态的标准化开发模板。该项目深度融合Ant Design的设计语言与React函数式编程范式，通过组件化、模块化和工程化手段，支撑多团队协同开发，提升跨项目复用能力。
React 中集成 Ant Design 组件库：提升开发效率与用户体验
weixin_46560512的博客
05-06 2020
React 中集成 Ant Design 组件库：提升开发效率与用户体验 一、为什么选择 Ant Design 组件库？ 二、基础引入方式 三、按需引入（优化性能） 四、Ant Design Charts
Ant Design在react项目中的使用
weixin_65243943的博客
07-01 691
Ant Design在react项目中的使用
react 中引入 ant-design
qq_42905523的博客
12-28 2043
react 中引入 ant-design 一. 安装 二. 引入 1.全局引入 2. 按需加载 ①手动按需加载 ②使用 babel-plugin-import 按需加载 （1）运行 npm run eject 暴露出webpack的配置文件，项目会多出config和scripts文件夹 问题：关于文件被修改了，无法运行 npm run eject 命令，删除.git文件 （2）运行 cnpm install babel-plugin-import --save ，安装babel按需加载依赖 （3）在
Ant Design for React的DatePicker日期组件设置默认显示中文的方法
07-23
Ant Design for React 的 DatePicker 日期组件设置默认显示中文的方法 在 Ant Design for React 的 DatePicker 日期组件中，默认情况下显示英文，但是在某些情况下，我们需要将其设置为中文。今天，我们将学习如何...
精选资源
React Ant Design树形表格的复杂增删改操作
01-18
react使用key来代表每一行是为了避免重新渲染的问题，这个优化也在实际的开发中带来了不少的问题。比如新建行时需要自定义新key。 下面直接上一下代码及代码效果，这是一个三级的树形表格，且其中包含二级标题。 ...
基于React和Ant Design的数据大屏展示设计源码
04-03
本设计源码提供了一个基于React和Ant Design的数据大屏展示系统。项目包含27个文件，主要使用JavaScript、CSS和HTML编程语言。文件类型包括7个JavaScript文件、7个Map文件、6个CSS样式文件、2个PNG图片文件、1个ICO...
基于Ant Design UI框架的React项目
热门推荐
findhappy117的博客
02-26 1万+
这款基于React开发的UI框架，界面非常简洁美观，在这篇文章中我主要为大家介绍一下如何用Ant开始搭建React项目
react使用 Ant ui框架
lyxkgc的博客
10-25 916
分别基于react、vue、angular框架，各自开发了一套 Ant Design 的UI框架。​ |—— 移动端 Ant Design Mobile 一个基于 Preact / React / React Native 的 UI 组件库。现在组件已经成功运行起来了，但是在实际开发过程中还有很多问题，例如上面例子实际上加载了全部的antd组件的样式（对前端性能是个隐患）。注意： Ant 有针对react vue 移动端，pc端 ，注意区分。
【亲测免费】 React-Ant 项目快速入门指南
gitblog_00292的博客
08-19 949
React-Ant 项目快速入门指南 本指南旨在帮助开发者快速理解并上手 React-Ant 项目，我们将深入探索其核心结构、启动机制以及关键配置文件，确保你能顺利进行开发工作。 1. 项目的目录结构及介绍 React-Ant 项目遵循了一套清晰且标准的目录结构，以便于维护和扩展： src: 应用程序的主要源代码存放地。 components: 存放复用组件，如 UI 组件等。 pages:...
ant-react 插件安装
sc0002的博客
08-05 284
yarn add react-router-dom axios less-loader 暴露文件 yarn eject // webpack.config.js 配置 less
使用React和AntDesign构建初始前端项目及路由配置
123
08-20 1953
创建React项目，并使用antDesignUI库，配置页面路由
React中ant-design使用+antd的按需引入+自定义主题+踩坑填坑
weixin_45710060的博客
07-18 1万+
这两天正在学习react，学习使用ant-desgin快速搭建网站，在配置按需引入和自定义主题的时候，遇到一些问题，特此记录一下整个配置流程和解决方案的过程。
React - Ant Design4.x版本安装使用，并按需引入和自定义主题
技术共享，共同进步！
11-27 3869
React - Ant Design4.x版本安装使用，并按需引入和自定义主题
在React中使用 Ant Design
piaocanY的博客
10-26 428
可参考官网： https://ant.design/docs/react/introduce-cn 1:cnpm i antd --save 2:按需导入 Antd 的组件 import {DatePicker} from ‘antd’ 注意：import ‘antd/dist/antd.css’ //全局导入所有的Antd 样式表 （不推荐！全局导入这种太占用打包文件的体积了，推荐使用按需加载css样式） 3:调用render函数渲染 ReactDOM.render( ,document.getElem
ant react实例
07-24 421
https://ant.design/components/page-header-cn/
antdesign react
02-02
### 关于 Ant Design 和 React 的文档与资源 #### 官方文档 官方提供了详尽的指南来帮助开发者快速上手使用 Ant Design 组件库。对于希望集成 Ant Design 到 React 应用中的开发人员来说，可以从官方网站获取最新的 API 文档和支持的信息[^1]。 - **网址**: https://ant.design/docs/react/introduce - **特点**: 提供了详细的组件说明、设计原则以及最佳实践案例研究；支持国际化、主题定制等功能特性。 #### 社区贡献教程 除了官方资料外，在线社区也分享了许多实用的文章和视频教程，这些内容往往包含了更多实战经验和技术细节。例如 Medium 平台上的文章经常会有资深前端工程师撰写的关于如何优化性能或者解决特定场景下的问题的方法论介绍。 #### GitHub 仓库 GitHub 上有许多开源项目展示了不同类型的 Ant Design + React 实现方式。通过浏览这些问题解决方案可以学习到其他人的编码风格并借鉴其架构思路。特别是那些被广泛使用的模板或是插件形式发布的成果物能够极大地减少重复劳动时间成本。 ```javascript // 示例：创建一个简单的Pokemon应用展示列表项 import React from 'react'; import { Card, List } from 'antd'; function App() { const pokemonList = [ // 假设这里是从API请求得到的数据结构 {"name": "pikachu", "url": "https://pokeapi.co/api/v2/pokemon/25"}, ... ]; return ( <List grid={{ gutter: 16, column: 4 }} dataSource={pokemonList} renderItem={(item) => ( <List.Item> <Card title={item.name}> {/* 这里应该是动态加载图片 */} <img src={`${item.url}/sprites/default.png`} alt="sprite"/> </Card> </List.Item> )} /> ); } export default App; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值