阿里开源项目Ant Design Pro介绍与使用

AntDesignPro是一款基于React的企业级中后台前端框架,遵循AntDesign设计理念,提供优雅设计、响应式布局及国际化支持,适用于快速搭建中后台管理控制台。采用最新技术栈如dva和antd,内置mock数据和UI测试,助力高质量代码开发。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、Ant Design Pro简介

Ant Design Pro 是一个企业级中后台前端/设计解决方案,秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈,我们将持续迭代,逐步沉淀和总结出更多设计模式和相应的代码实现,阐述中后台产品模板/组件/业务场景的最佳实践,也十分期待你的参与和共建。

基于上述目标和提供了以下的典型模板,并据此构建了一套基于 React 的中后台管理控制台的脚手架,它可以帮助你快速搭建企业级中后台产品原型。

Ant Design Pro官网地址:https://pro.ant.design/index-cn

GitHub源码下载地址为:https://github.com/ant-design/ant-design-pro

二、Ant Design Pro能做什么?

语言描述如下:

优雅美观:基于 Ant Design 体系精心设计
常见设计模式:提炼自中后台应用的典型页面和场景
最新技术栈:使用 React/dva/antd 等前端前沿技术开发
响应式:针对不同屏幕大小设计
主题:可配置的主题满足多样化的品牌诉求
国际化:内建业界通用的国际化方案
最佳实践:良好的工程实践助您持续产出高质量代码
Mock 数据:实用的本地数据调试方案
UI 测试:自动化测试保障前端产品质量

三、初步使用

$ git clone git@github.com:ant-design/ant-design-pro.git --depth=1
$ cd ant-design-pro
$ npm install
$ npm start # 打开浏览器访问 http://localhost:8000

更详细的使用和发布可以参考这个网址:https://pro.ant.design/docs/getting-started-cn

关于组件介绍可以参考这个网址:https://pro.ant.design/components/AvatarList-cn

最终的运行效果应该是这样的,如图所示:

在这里插入图片描述

小结:

Ant Design Pro这个阿里巴巴的开箱即用的框架,我并没有在实际开发中用过,仅仅只是初步的Demo玩玩。不过后续可能考虑要用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值