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

大家好,我是鱼皮,今天给大家分享一个我自己用了多年、现在团队也在用的前端框架 —— 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.mzph.cn/news/102446.shtml

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

相关文章

LeetCode【15】三数之和

题目&#xff1a; 解析&#xff1a; 参考&#xff1a;https://zhuanlan.zhihu.com/p/111715985 代码&#xff1a; public static List<List<Integer>> threeSum(int[] nums) {// 先排序Arrays.sort(nums);List<List<Integer>> result new ArrayLis…

python pip安装超时使用国内镜像

网络环境差的时候需要我们独立的进行相对应的包下载离线安装&#xff0c;或者给pip 加上 国内的镜像源比如加上清华的镜像源&#xff1a; 参考网址&#xff1a;pypi | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror https://mirrors.tuna.tsinghua…

day 2 2.3.2 类和对象

具有相同或相似性质的一组对象的抽象就是类 null只能被转换成引用类型&#xff0c;不能转换成基本类型&#xff0c;因此不要把一个null值赋给基本数据类型的变量 Java语言支持的类型分为两类&#xff1a;基本类型和引用类型 基本类型包括boolean类型和数值类型。数值类型有整…

springcloud学习笔记(3)-服务管理组件Nacos

Nacos简介 在2中学习了服务治理中心eureka&#xff0c;而本节的nacos来自springcloud alibaba。 Nacos也是一个服务注册和管理的组件。 Nacos 支持几乎所有主流类型的“服务”的发现、配置和管理 官方文档 快速开始 | Spring Cloud Alibaba (aliyun.com) 概述 | Spring C…

Websocket获取B站直播间弹幕教程——第二篇、解包/拆包

教程一、Websocket获取B站直播间弹幕教程 — 哔哩哔哩直播开放平台 1、封包 我们连接上B站Websocket成功后&#xff0c;要做两件事情&#xff1a; 第一、发送鉴权包。第二、发送心跳包&#xff0c;每30秒一次&#xff0c;维持websocket连接。 这两个包不是直接发送过去&…

yolov8 (2) : 模型训练

yolov8 github: https://github.com/ultralytics/ultralytics yolov8 网络详解参见: YOLOv8 (1) : 网络讲解1. 环境安装 安装ultralytics包pip install ultralytics在终端输入yolo命令࿰

使用wireshark解密ipsec ISAKMP包

Ipsec首先要通过ikev2协议来协商自己后续协商所用的加解密key以及用户数据的esp包用的加解密包。 ISAKMP就是加密过的ike-v2的加密包&#xff0c;有时候我们需要解密这个包来查看协商数据。如何来解密这样的包? 首先导出strongswan协商生成的各种key. 要能导出这些key&#…

适合自学的网络安全基础技能“蓝宝书”:《CTF那些事儿》

CTF比赛是快速提升网络安全实战技能的重要途径&#xff0c;已成为各个行业选拔网络安全人才的通用方法。但是&#xff0c;本书作者在从事CTF培训的过程中&#xff0c;发现存在几个突出的问题&#xff1a; 1&#xff09;线下CTF比赛培训中存在严重的 “最后一公里”问题 &#…

身份证号码,格式校验:@IdCard(自定义注解)

目标 自定义一个用于校验 身份证号码 格式的注解IdCard&#xff0c;能够和现有的 Validation 兼容&#xff0c;使用方式和其他校验注解保持一致&#xff08;使用 Valid 注解接口参数&#xff09;。 校验逻辑 有效格式 符合国家标准。 公民身份号码按照GB11643&#xff0d;…

Vue3中使用tinymce全功能演示,包括开源功能

效果图&#xff1a; 1、下载插件: npm i tinymce npm i tinymce/tinymce-vue 2、在node_modules文件夹中找到tinymce下的skins复制到项目public文件夹中 &#xff08;可以先创建一个tinymce文件夹&#xff09;&#xff1a; 3、在tinymce官网中下载中文包&#xff0c;并放在刚…

pytorch中nn.DataParallel多次使用

pytorch中nn.DataParallel多次使用 import torch import torch.nn as nn import torch.optim as optim from torch.utils.data import DataLoader# 定义模型 class MyModel(nn.Module):def __init__(self):super(MyModel, self).__init__()self.fc nn.Linear(10, 1)def forwa…

STM32简介

STM32是ST公司基于ARM Cortex-M内核开发的32位微控制器&#xff0c;常应用在嵌入式领域如&#xff1a; 智能车&#xff08;用stm32做寻迹小车&#xff0c;读取光电传感器或者摄像头数据&#xff0c;然后驱动电机前进和转弯&#xff09;&#xff1b; 无人机&#xff08;用stm3…

Facebook广告账户被封?最全防封及申诉指南

Facebook广告是海外营销的一大利器&#xff0c;但是随着互联网的发展&#xff0c;有部分不法分子正在利用他进行盈利&#xff0c;导致Facebook官方安全审核日益严格&#xff0c;不少卖家遭遇封号问题&#xff01;这篇文章就来教你如何更好地管理 Facebook广告帐户&#xff0c;实…

windows10系统-15-markdown编辑器和文本复制工具Textify

1 markdown编辑器 Markdown是一种轻量级标记语言&#xff0c;创始人为约翰格鲁伯。 它允许人们使用易读易写的纯文本格式编写文档&#xff0c;然后转换成有效的XHTML&#xff08;或者HTML&#xff09;文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。 1.1 Typo…

EXCEL——根据单元格值设置不同色阶

方法&#xff1a;开始—>条件格式—>色阶&#xff08;默认色阶或复杂色阶&#xff09;。 一、默认色阶 如图&#xff0c;可选择自定义的色阶模式。 二、复杂色阶 1、如图&#xff0c;点击"其他规则" 2、选择复杂格式 此时可以看到&#xff0c;支持多种格式…

Vue实战项目1:跑马灯效果

Vue实战项目1&#xff1a;跑马灯效果 目录 一、效果预览二、编写思路三、整体代码展示 一、效果预览 二、编写思路 两个按钮用于启动和停止&#xff0c;绑定点击事件&#xff0c;使用v-on&#xff0c;可以简写为 <input type"button" value"跑起来" c…

《动手学深度学习 Pytorch版》 8.2 文本预处理

import collections import re from d2l import torch as d2l解析文本的常见预处理步骤&#xff1a; 将文本作为字符串加载到内存中。 将字符串拆分为词元&#xff08;如单词和字符&#xff09;。 建立一个词表&#xff0c;将拆分的词元映射到数字索引。 将文本转换为数字索…

认识SQLServer

深入认识SQL Server&#xff1a;从基础到高级的数据库管理 在当今数字时代&#xff0c;数据是企业成功的关键。为了存储、管理和分析数据&#xff0c;数据库管理系统&#xff08;DBMS&#xff09;变得至关重要。其中&#xff0c;Microsoft SQL Server是一款备受欢迎的关系型数据…

【LeetCode 算法专题突破】二分查找(⭐)

文章目录 前言1. 二分经典模板题目题目描述代码&#xff1a; 2. 在排序数组中查找元素的第一个和最后一个位置题目描述代码 3. 有效的完全平方数题目描述代码 4. 寻找峰值题目描述代码 5. 寻找旋转排序数组中的最小值题目描述代码 6. 点名题目描述代码 总结 前言 我刷过不少算…

​css的优先级​排序?

css的优先级 常用的选择器排序 !important>行内样式>#id>.class>标签(div,p…) 1.!important &#xff01;权重值无穷大,但也可以计算. 例如 div{ color:red !important; } body div{ color:red !important; /* 该权重值就大于上方*/ /* !important使用后不…