文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React实战：使用Vite+TS+Antd构建React项目

它的组件化设计和强大的虚拟DOM使得开发人员可以轻松地构建复杂的UI界面。而在React生态系统中，还有许多强大的工具和库，可以帮助我们更加高效地开发React应用程序。...在本篇博客中，我们将介绍如何使用，vite、TypeScript、React Router和Ant Design工具和库来创建一个React项目。正文内容一、什么是Vite？...四、什么是Ant DesignAnt Design是一个由阿里巴巴开发的React UI组件库。它提供了许多现代化的UI组件，如按钮、表单、弹出框和数据可视化等。...Ant Design的设计风格非常优雅和简洁，同时还可以提供多语言支持和自定义主题等功能。五、创建React项目现在，我们已经了解了一些常用的React工具和库，可以开始创建一个React项目了。...然后，我们在Header中创建了一个菜单，可以用来切换不同的页面。最后，我们使用Switch和Route组件来配置路由。

1.6K52

如何设计H5编辑器中的模版库并实现自动生成封面图

往期精选 H5编辑器的图片上传和图片库设计方案 如何实现H5编辑器的实时预览和真机扫码预览功能 在线IDE开发入门之从零实现一个在线代码编辑器 基于React+Koa实现一个h5页面可视化编辑器－Dooring...我们都知道要想设计一款好用的H5编辑器, 一定要简化用户操作, 将用户的使用成本降低到极致, 要想实现这一标准, 我们需要具备以下条件: 丰富的组件库 丰富的图片资源 灵活的组件配置 傻瓜式操作 开箱即用的...H5页面模版(模版库) 以上5个条件是开发H5编辑器非常重要的参考指标, 前四个条件笔者在之前的文章中都有具体的实现方案, 笔者将具体介绍H5编辑器中的模版库功能实现, 希望能给同样需要此需求的IT工程师们有个参考...章节概要 H5编辑器中的模版库设计基本思路 如何实现iframe子页面和父页面通信 基于dom元素自动生成封面图解决方案 正文 作为一名前端工程师, 解决项目问题是我们的基本职责之一, 我们可以利用已掌握的知识去解决项目开发中的问题和需求...H5编辑器的模版库设计基本思路 我们都知道H5编辑器中的页面呈现大多是基于json schema, 每一个在组件我们都可以细化为一个json元数据, 这样做是为了我们能更细粒度的控制组件, 而模版, 即是由很多组件组合而成的区块或者完整的页面

1.2K61
您找到你想要的搜索结果了吗？
是的
没有找到

Vue3 + TS + Ant Design +Gin+Mysql实现表格数据持久化存储

\table\Basic.vue 的基础组件，可以看到以上的效果，可是也只是一个示例，如果想实现前后端交互，实现增删改查的功能，就得后端连接数据库，数据库类型可以根据自己的需求选择，可以是mysql也可以是...先说说实现的流程思想，就是前端开发一个页面，后端连接数据库，将查询的结果返回给前端，具体如下： 1、前端使用vue+ts+antd的table组件渲染表格 2、通过axios请求后端api获取表格数据...3、后端api使用orm工具查询数据库中的表数据 4、将查询结果返回给前端组件 5、前端设置返回的数据到 Table 的 dataSource,表格会自动渲染 通过这个过程涉及到前后端的交互，对于vue...Npm install ant-design-vue axios yarn add ant-design-vue axios 3、创建 Table 组件,使用 Ant Design 的 Table 渲染表格..., axios.post('/deleteRecord'),后端接收并 DELETE 删除记录 - 修改:在表格行添加编辑按钮,弹出编辑表格,axios.put('/updateRecord'),后端接收并

32420

使用 React 和 ethers.js 构建DApp

/components/header.tsx 编辑header.tsx为： //src/components/header.tsx import NextLink from "next/link" import...任务 4.1: 添加空的ReadERC20组件来读取 ClassToken 在 webapp 目录中，添加一个空组件components/ReadERC20.tsx。...任务 5：执行写操作（转账） 继续在 Web App 中与智能合约交互，现在执行一个写操作 任务 5.1：添加空的TransferERC20组件 // src/component/TransferERC20...我们将在任务 6 中解决这个问题： 任务 6：监听事件：在 Web 应用中与智能合约交互 我们可以通过智能合约事件的设计来更新 CLT 余额。...通过这些任务，我们还了解到 3 种与智能合约交互的方式： 读取：从智能合约中获取数据 写：在智能合约中更新数据 监听，监听智能合约发出的事件 在本教程中，我们直接使用ethers.js来连接到区块链。

5.2K30

做了N+1个企业项目之后, 我总结了这些React必备插件

Ant design 基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品 Ant design mobile 基于 Ant Design 设计体系的 React...UI 移动端组件库 MaterialUI 世界最受欢迎的基于质感设计的React UI库 React toolbox 一套使用CSS模块功能实现Google的Material Design规范的React...组件 React Virtualized 一个能渲染大型列表和表格的React解决方案 Fabric UI 微软开源的UX框架的集合，用于创建共享代码，设计和交互行为的精美的跨平台应用程序 React...UI 组件以及一些常用的业务组件 react-icons 基于React封装的丰富的图标库 3....AntV 包含 G2、G6、F2、L7 以及一套完整的图表使用和设计规范, 提供强大的数据可视化需求 G2Plot 基于G2封装的开箱即用的可视化组件库 recharts 使用React和D3构建的自定义的图表库

2K10

TDesign 更新周报（2022年5月第4周）

组件库 Vue2 for Web 发布 0.41.6 Features ColorPicker：新增颜色选择器，使用请参照 官网 Bug Fixes Table: EnhancedTable，树形结构中...image 模式下不生效 Transfer：修复列表数量变化时的页码展示问题 Form：修复实例方法 reset 参数不生效的问题 Form：reset和 submit现在会调用原生 form中的方法...默认参数和 tag 组件单元测试用例修复 Table：EnhancedTable，树形结构中，可选中表格禁用行勾选问题：动态设置选中列时，禁用失效 Table：EnhancedTable，树形结构中，...setData 里传输不必要的页面实例 Sticky：修复在无法获取页面实例时报错的问题 Skeleton：添加组件基础默认样式 DropdownMenu：修正遮罩层的位置，以及下拉菜单的高度 DropdownMenu...：修复菜单选项点击区域过小的问题 BackTop：修复丢失的 to-top 事件 Collapse：修复 header、expand-icon、header-right-content 插槽无法使用的问题

1.6K30

B端常用9大开源组件库集合（必备收藏）

2011年，Twitter推出Bootstrap；2015年，Fusion电商中后台组件库发布；2016年，Element中后台组件库发布；2016年，iview中后台组件库发布；2016年，蚂蚁金服Ant...大家总是会拿iview与Element相比，因为它们在UI上实在太像了，iview也是基于Vue的中后台UI组件库。...Ant Design，林林总总有这些能力：2016年，Ant Design1.0发布，包含中后台基础组件库及移动端基础组件库，且配套设计语言；2017年，AntV数据可视化解决方案发布，语雀知识库发布；...Ant Design Pro发布，开箱即用的中台前端/设计解决方案。Ant Design Landing首页模板资产和首页编辑器发布；2019年，HiTu插画资产发布。...并且ArcoDesgin一推出时，就具备了非常完善的能力，组件库只是其中之一。可见，ArcoDesgin直接对标Ant Design，设计体系在中国不再只有Ant Design一家。

2.1K20

字节前端终于开源！吹爆！

这次他们开源的 Semi Design，不仅是一套精美的设计系统，还是一套开箱即用的 React 组件库，对于我这种喜欢用 React 来写前端的开发者，真的是福音了。...他有以下几大特点： 遵循简洁轻量、现代化的设计风格，开放自定义，让设计 “活” 起来 提供主题编辑器和主题商店，可以轻松切换视觉风格 主题商店 完备的国际化，默认支持十几种语言 采用跨前端框架技术方案实现...、F/A 分层设计，通过重构，可以快速支持除 React 外的通用组件库，比如 Vue、Svelte 等： F/A架构 当然，光有这些并不能让我眼前一亮。...组件文档 此外，整个文档给我的感觉也是似曾相识，好像和蚂蚁的 React 组件库 Ant Design 神似。 Ant Design 组件库 然而，点击查看一个组件后，我发现了一些小惊喜。...实时编辑组件 此外呢，Semi Design 还计划上线物料市场，可以理解为一个组件社区。之后会提供更多开箱即用的组件，帮助大家更快地开发出精美的前端界面。

1.8K61

类型即正义：TypeScript 从入门到实践（序章）

在这篇教程的讲解过程中，我们将通过 Ant Design[17] 对应的 React 组件库 antd[18] 来辅助我们项目的编写，使得我们可以专注于讲解 TS 的核心知识，而不被繁杂的界面语言所干扰...提示Ant Design [19]是蚂蚁金服孵化的一套企业级产品设计体系，提供了完备的 TS 类型定义，使得我们可以很方便的在 TS 项目中使用，在最近发布了 4.0 版本，致力于创造高效愉悦的工作体验...Mobile[21] 开箱即用的中台前端/设计解决方案：Ant Design Pro[22] 插画设计：海兔[23] 一款为设计者提升工作效率的 Sketch 工具集 ：Kitchen[24] 后面图雀社区计划围绕...✌️ 安装依赖 好了，大致介绍了 antd 组件库及 Ant Design 周边之后，我们马上来写代码引入 antd，打开命令行，在其中输入如下命令： $ npm install antd 运行上面的命令安装完依赖之后就可以在项目中使用了...自此，我们就引入了 antd 组件库，并进行了按需配置使用以及配置主题色和使用了 Ant Design 最新的暗色主题 -- Dark Mode。

1.5K20

Mifa Design：一个服务于 Markdown 的设计体系

它不仅让 Web 应用与 Android 原生应用、Chrome OS 应用等等有了一致的外观效果，它还能提高一个一致的视觉体验。 Ant Design 是一个服务于企业级产品的设计体系。...Mifa 微信公号编辑器 ? Mifa 微信公号编辑器 打开 md.phodal.com 即可使用 缘由 过去，在讨论程序员影响力的时候，我们讨论了 Avatar、ID 一致性带来的影响。...在 UI 设计中，分子是由几个基本的 HTML 标签组成的简单组织。例如，在一个搜索元素中，它是由标签原子、输入原子和搜索原子组成： ?...它用于创建一些独立、可复用的内容，诸如 header： ? Mifa Header 又比如 footer： ? Mifa Footer 这是界面中，相对复杂的不同区块。...模板：Mifa Jekyll 主题及 Markdown 编辑器 模板，顾名思义就是整合前面的元素，构建整体的布局。 诸如一个博客包含了 header、footer 及博客本身的内部： ?

1.1K60

【架构师（第二十三篇）】编辑器开发之画布区域组件的渲染

---- 数据结构 组件数据结构 props：组件的属性，包括样式属性和一些其他属性，比如 url，action 等。 id：组件的 id，唯一标识，使用第三方库 uuid 生成。...name：组件的名称，用于动态组件渲染的 ：is 属性 编辑器数据结构 components：组件列表，当前画布添加了哪些组件。 currentElement：激活的组件，表示当前正在编辑的组件。...props: { [key: string]: unknown }; // id, uuid v4 生成 id: string; // 业务组件库的名称 l-text , l-image...; 基础布局 使用 ant-design-vue 进行基础的布局，包含 header，组件列表区域，画布组件编辑区域，组件属性编辑区域。...，所以我打算使用 setup 语法糖进行改写，但是在使用动态组件 :is 时，如果不显式的注册组件，最后渲染出来的结果就是一个自定义标签，而不是我们书写的组件。

39830

推荐几个必备珍品组件库

前端是一个一直在发展的名词，从最初刀耕火种时代的页面仔到文艺复兴时期的前端工程化再到如今新时代的大前端，前端技术在某种程度上似乎可以为所欲为了。但是我们这次讨论的是前端技术中的一部分—组件库。...但是细看这套组件库的灵魂是维护团队提出了一个设计语言的概念，也就是说组件库的所有交互样式都是遵循这套设计语实现的，14px 的主字体，类别的对齐，简洁直接的设计风格都决定了这套组件库在用户体验上的亮眼。...代码层面：组件库由 TS+React 的组合实现，看代码可以知道，维护团队在开发 ant-design 之前就已经在维护 rc-components 的仓库了，可以说 ant-design 是对 rc-components...生态：ant-design 的生态周边比较好，维护方提供了基于 ant-design 的开箱即用的中台前端/设计解决方案，里面包括了一系列中台需要的业务逻辑。...生态：iview-admin(开箱即用的中台解决方案)，iview-Weapp(微信小程序组件库)，iview Run(在线编辑器) MATERIAL-UI 类型：基于 React 组件库 官网：https

2.7K50

7 款最棒的 React 移动端 UI 组件库 - 特别针对国内使用场景推荐

更棒的是内置的功能复杂，我们自己很难处理的常用组件，比如表格、表单、富文本编辑器、时间日期选择器、实时拖拽组件等，再进一步，还有帮我们把组件的轮子装好的 React admin 后台管理系统。...React 移动端 UI 组件库，把它放在第一个推荐是因为它真的很好用，特别是面对一个业务发布在多端的情况特别适用。...Ant Design Mobile of React - 阿里前端 UI 库，面向企业级中后台 [02-Ant-Design-Mobile-React] Ant Design Mobile 上手文档 |...Ant Design Mobile Github Antd Design Mobile of React 是基于 Ant Design 设计体系的 React 移动端组件库，主要用于研发企业级中后台产品...Material UI 绝不是简单的实现了 MD 设计原则的 UI 库，而是更像一个帮助开发者解决设计问题，提供优秀设计组件或设计方案的组件库。

11.4K21

7 款最棒的开源 React UI 库测评 - 特别针对国内使用场景推荐

更棒的是内置的功能复杂，我们自己很难处理的常用组件，比如表格、表单、富文本编辑器、时间日期选择器、实时拖拽组件等，再进一步，还有帮我们把组件的轮子装好的 React admin 后台管理系统。...- 字节跳动 UI 组件库开源，大厂逻辑，设计文档完美 Ant Design React - 阿里前端 UI 库，面向企业级中后台 Material-UI - 全球顶级 React 组件库 Google...TDesign 在去年刚刚开源，作为一款诞生于腾讯内部的 UI 组件库，经过腾讯内部 500+ 项业务检验的企业级设计体系，不仅仅是前端 UI 库，更是前端的设计指南和设计体系。...扩展阅读：React Router 6 (React路由) 最详细教程 Ant Design of React - 阿里前端 UI 库，面向企业级中后台 [04-antdesign-react] 阿里...组件库，主要用于研发企业级中后台产品。

5.3K40

开源 UI 组件库和开发工具库概览 | 开源专题 No.59

ant-design/ant-design[1] Stars: 87.9k License: MIT Ant Design 是一个企业级 UI 设计语言和 React UI 库。...主要特点： 提供了一套全新、面向未来并富有前瞻性的 React 组件 支持渐进式迁移至最新版 (FluentUI V9) 包含对老版本 (如 V8) 已经广泛使用过程中积累下来的较为完善且稳定可靠等的功能...vuetifyjs/vuetify[3] Stars: 38.1k License: MIT Vuetify 是一个无需设计技能的 UI 库，具有精美手工制作的 Vue 组件。...为跨领域团队而生：专注于设计和代码团队，提供无需频繁交接工作的愉快体验。 多平台支持：基于 Web，在任何现代浏览器中运行，不受操作系统或本地安装限制。...shadcn-ui/ui[5] Stars: 27.1k License: MIT shadcn/ui 是一个使用 Radix UI 和 Tailwind CSS 构建的精美设计组件库。

23810

总结100+前端优质库,让你成为前端百事通

并且可以在 React、Vue、Angular 项目中使用 「Scroll Reveal」 零依赖，为 web 和移动浏览器提供了简单的滚动动画，以动画的方式显示滚动中的内容 「Kute.js」 一个强大高性能且可扩展的原生...DOM 节点转换为用 JavaScript 编写的矢量（SVG）或光栅（PNG 或 JPEG）图像的库 「pica」 一个在浏览器中调整图像大小，而不会出现像素失真，处理速度非常快的图片处理库 「Lena.js...元素的 CSSku 库 hint.css 一个用纯 css 和 html 实现的提示库 React相关库 UI 库 Ant design 用于研发企业级中后台产品的 UI 组件库 Ant design...mobile 基于 Ant Design 设计体系的 React UI 移动端组件库 MaterialUI 世界最受欢迎的基于质感设计的 React UI 库 toolbox 一套使用 CSS 模块功能实现...水印组件 数据可视化 AntV 包含 G2、G6、F2、L7 以及一套完整的图表使用和设计规范, 提供强大的数据可视化需求 G2Plot 基于 G2 封装的开箱即用的可视化组件库 recharts

3.1K20

【wiki知识库】03.前后端的初步交互（展现所有的电子书）

制于布局呢，我使用的就是下边的布局。但是下边的布局是没有底部标签的，所以我还从其他的布局中剪下来一小块的底部信息组件。...就如下图所示，我在浏览器的网址中输入了一个/about，现在这个页面展示成这个样子，这就说明，绑定了/about的这个路由的一个组件，展示到了这个路由出口当中。...这个组件中使用了ant-design中的一些组件,我们要先把这些组件引入一下。首先就是在我们的项目中使用ant-design。...在main.js文件中添加以下信息,把我们的ant-design引入到我们的项目中,同时把其中的一些小标签也引入一下,这个之后会用到的。...组件化the-header和the-footer:主要是把这两个组件给提取出来给所有的模块使用,这两个组件是一个公用的 修改App.vue:App.vue组件中不再写很多代码了,而是通过组件的方式和路由的方式展示页面信息

5610

我是如何突围传统行业的？

服务器上运行的 Node 版本非常低，到现在还是 8.x，各种低版本的库都在，比如 Ant Design 用的 3.6.2，在项目开发中遇到穿梭框无法进行树状显示(代码一摸一样，在高版本 3.19.2，...文档管理，采用项目管理工具自带的文档，要求做到文档可以团队编辑，可以查看到编辑历史。 项目周会，过大家手上目前的迭代进度，遇到的问题，需要协调的资源，风险控制等。...设计规范 由于我司采用的是 Ant Design UI 库，所以设计标准，尽量都是按照 Ant Design 现成组件和样式来做，避免开发二次修改，参考这个链接 Ant Design 设计原则 某个列表页...某个详情页 [WechatIMG1181.png] 详情页大量会使用到表单，所以直接使用 Ant Design 的 From 表单组件。 表单每行放多少个，都是以 Ant Design 组件来的。...目前大部分页面不需要设计资源投入，尽量按照 Ant Design 设计标准和我们自定的 UI 标准风格来做，减少设计人员的工作投入。

77320

jeecg-boot

JeecgBoot在提高UI能力的同时，降低了前后分离的开发成本，JeecgBoot还独创在线开发模式（No代码概念），一系列在线智能开发：在线配置表单、在线配置报表、在线图表设计、在线设计流程等等。...，可极其方便的生成图形报表、pdf、excel、word等报表； 8.采用前后分离技术，页面UI风格精美，针对常用组件做了封装：时间、行表格控件、截取显示控件、报表组件，编辑器等等 9.查询过滤器：查询功能自动生成... │  ├─行编辑表格JEditableTable │  └─省略显示组件 │  └─时间控件 │  └─高级查询 │  └─通用选择用户组件 │  └─通过组织机构选择用户组件 │  └─报表组件封装...其他说明 项目使用的 vue-cli3, 请更新您的 cli 关闭 Eslint (不推荐) 移除 package.json 中 eslintConfig 整个节点代码 修改 Ant Design 配色...，在文件 vue.config.js 中，其他 less 变量覆盖参考 ant design 官方说明   css: {     loaderOptions: {       less: {

7.6K10
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券