【前端】ant-design-pro初体验

码农服务社

已于 2023-07-06 22:02:14 修改

阅读量755

点赞数

分类专栏：软件研发文章标签：前端

于 2023-07-06 21:59:52 首次发布

本文链接：https://blog.csdn.net/wenchun001/article/details/131586089

版权

软件研发专栏收录该内容

57 篇文章 1 订阅

订阅专栏

AntDesignPro是基于AntDesign设计体系的中后台前端框架，提供预设的模板和业务组件，简化企业级产品的开发流程。通过git或ant-design-pro-cli进行本地安装，项目结构包括配置、模拟数据、源码、布局、组件、服务和测试等模块，支持国际化和自动化构建功能。

摘要由CSDN通过智能技术生成

什么是Ant Design Pro

Ant Design Pro 是一个企业级中后台前端/设计解决方案，它秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提高企业级中后台产品设计研发过程当中的『用户』和『设计者』的体验。

本地安装

方法一：git安装

git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
 cd my-project 
 npm install //安装依赖
 npm start   //运行项目

方法二：使用ant-design-pro-cli脚手架

npm install ant-design-pro-cli -g //全局安装脚手架
mkdir pro-demo && cd pro-demo    //在新目录下
pro new                          //新建antd-pro
npm start   //运行项目

项目结构

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和经常使用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json