我用了多年的前端框架,强烈推荐!

大家好,我是鱼皮,今天给大家分享一个我自己用了多年、现在团队也在用的前端框架 —— Ant Design Pro。

什么是 Ant Design Pro?

Ant Design Pro 是由蚂蚁金服开发的、基于 Ant Design 组件库的开发框架,专门用于构建企业级管理后台和前端应用。

它提供了一整套前端中后台项目的解决方案,包括路由、权限管理、国际化、数据 mock、工程化等,帮助开发者快速搭建功能丰富的管理系统。

img

除了 Ant Design Pro 外,我们最好再了解一下 Ant Design 相关的技术生态,比如:

1)Ant Design:一套企业级 UI 设计语言和组件库。它提供了丰富的界面组件、图标、布局和样式,用于构建现代化的 Web 应用程序。Ant Design 遵循一套统一的设计规范,提供一致性的用户体验。

地址:https://ant.design/

img

2)Ant Design ProComponents:在 Ant Design 的基础上进行封装和高度定制化的组件库,包含了像高级表格、表单等常用的业务组件,更适用于开发中后台项目,进一步提高开发效率。

地址:https://procomponents.ant.design/

img

3)AntV:一整套数据可视化组件和工具库。它提供了多种可视化图表和图形,用于帮助开发者在 Web 应用中创建交互式、吸引人的数据可视化图表。AntV 包括 G2、G6、F2 等多个子库,每个子库用于不同类型的数据可视化需求。

地址:https://antv.antgroup.com/

img

这么一大套技术,可以称得上 “全家桶” 了!

为什么用 Ant Design Pro?

从定位上来说,Ant Design Pro 是一个开箱即用的中后台前端开发框架,能够帮助我们快速开发大多数网站(尤其是管理系统)。

比如使用一行命令,就能得到下图的完整网站:

img

从功能上来说,Ant Design Pro 提供了一整套前端解决方案,包括路由、权限管理、数据管理、国际化、数据 mock、工程化、打包部署等,基本覆盖了整个前端开发流程,不用自己再去整合一堆库、自己创建各种配置了,大幅提高开发效率。

从生态上来说,Ant Design Pro 是由大厂团队开发维护、质量有保障;并且在 GitHub 上有几万个 star、社区也比较活跃,很多开发时出现的问题都有解决方案。

而作为一名全栈开发者,鱼皮个人喜欢使用 Ant Design 和 Ant Design Pro 全家桶的重要原因是:Ant Design 同时有 Vue 和 React 的实现版本,无论我选择什么前端框架开发项目,都能保持编码和网站效果的一致性,进一步提高开发效率。

换言之,学这一套组件库就足够了!

如何学习 Ant Design Pro?

由于该框架由大厂团队开发,经常发布更新版本和改动,所以请务必 阅读官方文档 来学习,千万不要完全机械性地跟着教程去学习!

官方文档:https://pro.ant.design/zh-CN/docs/getting-started/

Ant Design Pro 的官方文档写得还是非常清晰易懂的,从入门、开发再到部署都有完整的讲解,按照顺序读一遍就行了。

这里再给大家几个学习建议:

  1. 根据项目选择合适的文档版本,再去阅读,v4 版本和 v5 版本差异非常大,我个人更喜欢用 v4 版本
  2. 新手在不熟悉 Ant Design Pro 功能之前,建议不要创建全量区块项目,选择 simple 即可
  3. 边读文档边实践,多尝试修改代码并查看效果,更容易理解 Ant Design Pro 框架的功能

img

如果你学习使用 Ant Design Pro 框架的项目教程时,遇到了报错,不用慌张。先去看最新官方文档上的命令和用法,或者切换文档版本为和视频一致。如果还有报错,那么就把错误信息贴到百度去查询。如果还有报错,去框架的 Github Issues 区去搜一下(比如:https://github.com/ant-design/ant-design-pro/issues),99% 你遇到的问题别人也遇到过,而且大多数情况下都有对应的解决方案。

希望大家灵活一点,任何教程都有保质期,学会阅读官方文档、通过各种渠道自主解决问题,才能让你之后的编程学习风雨无阻!

实践

编程导航 的用户中心项目、API 开放平台项目、智能 BI 项目都使用了 Ant Design Pro 作为前端开发框架,并且使用了 Ant Design 作为组件库。

👉🏻 编程导航原创项目教程系列:https://yuyuanweb.feishu.cn/wiki/SePYwTc9tipQiCktw7Uc7kujnCd

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/132548.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《UnityShader入门精要》学习1

读者可以在开源网站github(https://github.com/candycat1992/Unity_Shaders_Book)上下载本书的源代码。 第二章 渲染流水线 渲染流水线的最终目的在于生成或者说是渲染一张二维纹理,即我们在电脑屏幕上看到的所有效果,它的输入是…

java基础 IO

IO流概述: IO流的分类 字节流写入数据: package wwx;import jdk.swing.interop.SwingInterOpUtils;import java.io.*;public class Test {public static void main(String[] args) throws IOException {//指定写入文件的路径 需要抛出异常FileOutputStr…

【Java 进阶篇】HTML 语义化标签详解

HTML(HyperText Markup Language)是构建Web页面的标准语言。在HTML中,标签(tag)是用于定义页面结构和内容的关键元素。在构建网页时,了解如何正确使用HTML标签是非常重要的,因为它们不仅影响页面…

邮政编码,格式校验:@ZipCode(自定义注解)

目标 自定义一个用于校验邮政编码格式的注解ZipCode,能够和现有的 Validation 兼容,使用方式和其他校验注解保持一致(使用 Valid 注解接口参数)。 校验逻辑 有效格式 不能包含空格;应为6位数字; 不校验…

汽车一键启动点火开关按键一键启动按钮型号规格

汽车点火开关/移动管家一键启动按键/汽车改装引擎启动按钮型号:YD828溥款开关 一键启动按钮(适用于配套启动主机使用或原车一键启动开关更换) 1.适合配套专用板板安装 2.开孔器开孔安装 3.原车钥匙位安装 外观:黑色 按钮上有3种不…

Tomcat 线程模型性能调优

Linux I/O模型详解 I/O要解决什么问题 I/O:在计算机内存与外部设备之间拷贝数据的过程。 程序通过CPU向外部设备发出读指令,数据从外部设备拷贝至内存需要一段时间,这段时间CPU就没事情做了,程序就会两种选择: 让出…

以数据为中心 的AI v.s. 以模型为中心的AI

原文:Data-Centric AI vs. Model-Centric AI Introduction to Data-Centric AI 当你学习关于机器学习相关的课程时,通常是给你一个清洁好的数据,你的任务是利用这个数据集训练出一个最好的模型。所有在机器学习课程教的技巧都是为了这个目标&#xff1…

需永远在线的游戏公司,如何在线替换开源存储?

小帅是一个酷爱游戏的玩家,他玩一款游戏已经很久了,始终乐在其中。 这款游戏风靡全球,在中国手游出海榜单中,长期位居榜首。 他不知道的是,就在他玩游戏的过程中,这款游戏的出品公司,其实已经…

什么是存储服务器?

随着互联网的发展,越来越多的信息会在网络上暴露,所以企业就会更加重视数据,因此更加安全可靠的数据存储服务器受到了大多数人的信赖,今天就让小编带大家了解一下什么是存储服务器吧! 存储服务器的含义。存储服务器是…

Nginx解析漏洞

常见的解析漏洞&#xff1a; IIS 5.x/6.0解析漏洞 IIS 7.0/IIS 7.5/ Nginx <0.8.3畸形解析漏洞 Nginx <8.03 空字节代码执行漏洞 Apache解析漏洞 Nginx文件解析漏洞 对于任意文件名&#xff0c;例如:cd.jpg在后面添加/x.php后&#xff0c;即可将文件作为php解析。 原理…

SpringMVC简介

SpringMVC概述 SpringMVC是一个基于Spring开发的MVC轻量级框架&#xff0c;Spring3.0后发布的组件&#xff0c;SpringMVC可以和Spring无缝整合&#xff0c;使用DispatcherServlet作为前端控制器&#xff0c;且内部提供了处理映射器、处理适配器、视图解析器等组件&#xff0c;…

RecyclerView 空白区域点击事件

在项目中使用RecyclerView展示列表数据&#xff0c;用了GridLayoutManager&#xff0c;在遇到item个数不满足一行时&#xff0c;会在页面右侧透出空白位&#xff0c; 如下图所示. 目前点击空白位是没有点击响应事件的&#xff0c;我们想实现点击响应以扩大用户可以进入LandingP…