React中使用Ant Design

最新推荐文章于 2024-09-11 16:35:34 发布
最新推荐文章于 2024-09-11 16:35:34 发布
阅读量527 收藏
点赞数
分类专栏： 前端 文章标签： html react ant 组件化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gsliwb/article/details/114899081
版权
本文档介绍了如何在VS Code中使用React结合Ant Design创建项目。首先，讲述了需要的工具，包括VS Code、React、Node.js和Ant Design。接着，详细说明了Node.js的下载配置，React项目的创建和初始化。然后，解析了React项目中各个文件的作用。最后，通过修改`src/App.js`引入Ant Design按钮组件，并在`src/App.css`中引入样式，展示了实际操作步骤，帮助读者成功运行antd组件。
摘要由CSDN通过智能技术生成

使用VScode在React框架中使用Ant Design组件

前言

记录了在VS code中使用Ant Design中组件的使用方法

提示：以下是本篇文章正文内容，下面案例可供参考

一、所需工具

VS code + React +Node.js + ant

二、下载配置Node.js使用NPM

下载安装对应的版本

下载地址：https://nodejs.org/en/download/
安装教程：https://www.runoob.com/nodejs/nodejs-install-setup.html
下载对应的压缩包进行安装在这里插入图片描述

说明：安装的Node.js中就已经包含了npm，所以后续我们就不用再去安装npm，详细安装过程在上方链接中。

二、react

最低0.47元/天 解锁文章
gsliwb
关注
专栏目录
React学习21----React UI框架Antd(Ant Design)的基本使用
翟浩浩Android专栏
02-27 7186
Ant Design 现在支持：react,angular,vue 3个框架 官网地址： https://ant.design/index-cn 具体使用： 1、antd官网： https://ant.design/docs/react/introduce-cn 2、React中使用Antd 2.1安装antd npm install antd --save / yarn add a...
React 使用antDesign
weixin_60463255的博客
11-26 521
指令npm install antd --save（Ant Design - 一套企业级 UI 设计语言和 React 组件库） import React, { Component } from 'react'; import 'antd/dist/antd.css'; import { Input, Button, List } from 'antd'; const data = [ 'Racing car sprays burning fuel into crowd.', ...
【Ant Design】解决使用日期时间类组件中文汉化无效
day day up
07-24 592
antd 解决使用日期时间类组件中文（汉化）部分为生效， 不同版本可能依赖的时间库也是不一样的，具体的配置还需要参照官网文档。
前端入门经验——Vue项目中全局配置Echarts
qq_45997679的博客
11-24 1292
1、安装echarts项目依赖。 cnpm i echarts --save 2、安装组件。 cnpm i vue-echarts -S 3、在main.js 中引入echarts组件库。 import echarts from 'echarts' import ECharts from 'vue-echarts' Vue.prototype.$echarts = echarts //注册组件 Vue.component('v-chart', ECharts) 4、使用。 <v-chart cl
React如何使用 Ant Design(简单使用)
weixin_50559423的博客
01-27 6955
使用 antd 组件库的一个小案例
第十五章 React使用UI（Ant Design）框架
Etc.End的博客
12-14 1433
Ant Design还是是很重要的。它是一个成熟的前端框架，提供了丰富的组件库，包括按钮、表单、表格、图标、菜单、对话框等等，可以满足各种常见的界面需求。此外，它还支持国际化，可以根据不同的语言和地区自动切换组件的文本和样式。因此，对于前端开发人员来说，学习Ant Design是非常有必要的。它可以帮助你提高开发效率和质量，打造出令用户满意的前端应用。同时，Ant Design的活跃社区和丰富的案例教程也可以帮助你学习和交流。
React中使用Ant Design 以Menu导航菜单形式展示Tree树形结构
weixin_39168678的博客
07-14 2565
目的 项目分为全局路由如登录页面，404页面之类的和由侧边栏menu控制跳转的子路由页面主要是业务页面。页面子页面放入views文件夹下，将自动读入注册成route，配置文件主要用于生成树形menu侧边栏。建议配合项目结构进行阅读效果更佳 效果 项目结构 子页面配置文件 将根据以下配置文件生成树形menu导航栏 export default [ { name: '测试页面', path: '/test', meta: { a
react中使用ant design 中的alert
06-03
要在 React 中使用 Ant Design 中的 Alert，您需要首先安装 Ant Design 和 React-DOM 库。可以使用以下命令进行安装： ``` npm install antd react-dom ``` 安装完成后，您可以在 React 组件中导入 Alert 组件，并...
react-antd-landing-page:使用React和Ant Design制作的登录页面
05-28
在本项目"react-antd-landing-page"中，开发者利用React和Ant Design库构建了一个功能齐全的登录页面。Ant Design是流行的UI框架，为React应用提供了丰富的组件和样式，简化了前端开发工作。以下是关于这个项目及其...
react-admin：基于React + ant-design的用于后台管理项目的脚手架
02-05
React + Ant Design脚手架，专用作后台管理系统，反复在项目中实践和优化，功能齐全，细节完善，并提供丰富的示例代码，可以直接上手和开发。 技术选型 react + redux + react-router + ant-design +不可变+获取 ...
react-antd.zip
05-25
react-antd项目搭建；antd UI框架的引入以及使用方法；react-router-dom 的引入，封装；styled-components 的引入，适用方法等。
react-ant-pro：（基于pro 1.0）基于Ant Design Pro的后台项目修改的多标签页标签（多标签tab，拖拽，富文本，多功能表，多选选择，React Hooks）
02-05
ant-design-tabs（支持多标签tabs） 体验环境 体验环境： ://kuhami.github.io/react-ant-pro账号：admin / user密码：888888/123456 由于体验环境发出的请求针对的是不存在的记录，服务器没有进行操作会报请求错误404。 特征页面 :gem_stone:优雅美观：基于Ant Tabs系统精心设计 :triangular_ruler:常见设计模式：提炼自中后台应用的典型页面和场景 :rocket:最新技术栈：使用React / umi / dva / antd等尖端前沿技术开发 :mobile_phone:响应式：针对不同屏幕大小设计 :artist_palette:主题：可配置的主题满足数值的品牌诉求 :globe_with_meridians:国际化：内建领导人通用的国际化
react中使用Ant Design的基本用法
七色花
08-19 6618
1.antd官网 https://ant.design/docs/react/introduce-cn 2、React中使用Antd 1)、安装antd npm install antd --save / yarn add antd / cnpm install antd --save 2)、在react项目的css文件中引入Antd的css @import '~antd/...
【React入门实践】结合Ant-Design从0带你手把手开发【个人中心-信息修改】页面
2401_84411323的博客
05-01 981
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-Q8vpiEPW-1714495462365)]
react 安装使用 antd+国际化+定制化主题+样式兼容
最新发布
Z_Wonderful的博客
09-11 580
react 安装使用 antd+国际化+定制化主题+样式兼容
ant.design：在VSCode里创建一个antd项目
sulia1234567890的博客
10-19 2243
1. antd的背景知识 antd的概念，安装等，可参考此文： 2.VScode里面创建一个antd项目，yarn create react-app antd-demo （1）cd antd （2）npm install -g yarn （3）yarn add antd （4）yarn （5）yarn start 其实启动的页面，就是类似之前React其他案例。只是这里安装了antd组件库之后，在后面就可以直接使用antd的很多组件, 比如<Button > </...
React开发（123）:ant design学习指南
歌谣的博客
09-01 103
// 表单组件 <Form> <Button> <Input> <InputNumber> //所有输入数字的地方要使用此组件 <Radio> <Select> <DatePicker> <TreeSelect> // 数据展示|布局组件 <Card> <Tabs> <Tab..
React ant design表格导出数据为EXCEL表格数据
weixin_42143550的博客
06-25 4313
一、由于公司项目需要,需要将表格数据导出为EXCEL表格数据。环境React+Ant Design 二、安装插件js-export-excel yarn安装-记得以管理员身份执行 yarn add js-export-excel npm安装 npm install js-export-excel 三、代码事例 页面先引入安装的插件 import ExportJsonExcel from 'js...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值