前端UI框架Ant Design Pro
一直忙于工作,也没时间总结。现在有点零散时间把之前做的笔记整理一下。
目前项目使用的技术栈是,前端UI框架Ant Design Pro,数据交互使用react,后端使用的是springcloud,离线存储数据使用hadop(刚搭完还没开始用).后端的技术栈世面上基本稳定都用微服务这套,因为spring全家桶一直非常稳定。
Ant Design Pro目前蚂蚁金服和阿里巴巴内部上百个项目正在尝试 Pro 的研发模式
1.安装node和git
2.从 GitHub 仓库中直接安装最新的脚手架代码。
$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project
目录结构
我们已经为你生成了一个完整的开发框架,提供了涵盖中后台开发的各类功能和坑位,下面是整个项目的目录结构。
├── config # umi 配置,包含路由,构建等配置
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # 全局 dva model
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── global.less # 全局样式
│ └── global.js # 全局 JS
├── tests # 测试工具
├── README.md
└── package.json
本地开发
安装依赖。
$ npm install
如果网络状况不佳,可以使用 cnpm 进行加速。
$ npm start
image.png
启动完成后会自动打开浏览器访问 http://localhost:8000,你看到下面的页面就代表成功了。
image.png
Ant Design Pro 的布局
在 Ant Design Pro 中,我们抽离了使用过程中的通用布局,都放在 layouts 目录中,分别为:
BasicLayout:基础页面布局,包含了头部导航,侧边栏和通知栏:
image.png
UserLayout:抽离出用于登陆注册页面的通用布局
BlankLayout:空白的布局
image.png
如何使用 Ant Design Pro 布局#
通常布局是和路由系统紧密结合的,Ant Design Pro 的路由使用了 Umi 的路由方案,为了统一方便的管理路由和页面的关系,我们将配置信息统一抽离到 config/router.config.js
下,通过如下配置定义每个页面的布局:
module.exports = [{path: '/',component: '../layouts/BasicLayout', // 指定以下页面的布局routes: [// dashboard{ path: '/', redirect: '/dashboard/analysis' },{path: '/dashboard',name: 'dashboard',icon: 'dashboard',routes: [{ path: '/dashboard/analysis', name: 'analysis', component: './Dashboard/Analysis' },{ path: '/dashboard/monitor', name: 'monitor', component: './Dashboard/Monitor' },{ path: '/dashboard/workplace', name: 'workplace', component: './Dashboard/Workplace' },],},],
}]
映射路由和页面布局(组件)的关系如代码所示,完整映射转换实现可以参看 router.config.js。
更多 Umi 的路由配置方式可以参考:Umi 配置式路由。
Pro 扩展配置#
我们在 router.config.js
扩展了一些关于 pro 全局菜单的配置。
···
{
name: 'dashboard',
icon: 'dashboard',
hideInMenu: true,
hideChildrenInMenu: true,
hideInBreadcrumb: true,
authority: ['admin'],
}
···
name
: 当前路由在菜单和面包屑中的名称,注意这里是国际化配置的 key,具体展示菜单名可以在 /src/locales/zh-CN.js 进行配置。icon
: 当前路由在菜单下的图标名。hideInMenu
: 当前路由在菜单中不展现,默认false
。hideChildrenInMenu
: 当前路由的子级在菜单中不展现,默认false
。hideInBreadcrumb
: 当前路由在面包屑中不展现,默认false
。authority
: 允许展示的权限,不设则都可见,详见:权限管理。
Ant Design 布局组件#
除了 Pro 里的内建布局以为,在一些页面中需要进行布局,可以使用 Ant Design 目前提供的两套布局组件工具:Layout 和 Grid。
Grid 组件#
栅格布局是网页中最常用的布局,其特点就是按照一定比例划分页面,能够随着屏幕的变化依旧保持比例,从而具有弹性布局的特点。
而 Ant Design 的栅格组件提供的功能更为强大,能够设置间距、具有支持响应式的比例设置,以及支持 flex
模式,基本上涵盖了大部分的布局场景,详情参看:Grid。
Layout 组件#
如果你需要辅助页面框架级别的布局设计,那么 Layout 则是你最佳的选择,它抽象了大部分框架布局结构,使得只需要填空就可以开发规范专业的页面整体布局,详情参看:Layout。
根据不同场景区分抽离布局组件#
在大部分场景下,我们需要基于上面两个组件封装一些适用于当下具体业务的组件,包含了通用的导航、侧边栏、顶部通知、页面标题等元素。例如 Ant Design Pro 的 BasicLayout。
通常,我们会把抽象出来的布局组件,放到跟 pages
、 components
平行的 layouts
文件夹中方便管理。需要注意的是,这些布局组件和我们平时使用的其它组件并没有什么不同,只不过功能性上是为了处理布局问题。
除了 Ant Design 官方提供的布局组件,也可以试试 社区精选 里推荐的布局组件。
具体可以参考官方文档:
作者:zhuyuansj
链接:https://www.jianshu.com/p/e8a5ce6eba1e
前端UI框架Ant Design Pro相关推荐
- 前端UI框架Ant Design Pro 依赖安装
前端UI框架Ant Design Pro 依赖安装 最近换了新工作,需要负责全栈开发,项目用到的前端框架是ant design, 蚂蚁金服基于react打造的一个服务于企业级产品的UI框架, 这边简单 ...
- 前端初学者的Ant Design Pro V6总结(上)
前端初学者的Ant Design Pro V6总结(上) 一.UI组件开发流程 () => {} 通用(异步)函数 useEmotionCss 定义CSS useModel获取全局状态 useC ...
- ant design vue table 高度自适应_很受欢迎的vue前端UI框架
最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...
- 使用Ant Design Pro,一个企业级开箱即用的中后台前端
#目录 ** 此文仅是个人自学理解的学习笔记,若有不对之处敬请指导更正,谢谢! ** 文章目录 @[toc] Ant Design Pro 了解 知识储备 安装使用 方法一:clone 实践 ESli ...
- Ant Design Pro入门教程 安装框架
介绍一下Ant Design Pro,说白了就是基于React的一套脚手架,UI是 Ant Design ,框架是 Ant Design Pro 脚手架安装完成,运行起来的样子: 下面我们来看看怎么安 ...
- 【前端】Ant Design Pro和Arco Design Pro非技术对比
最近公司要从Ant Design Pro和Arco Design Pro中选择一个作为中后台前端,非技术简单对比一下 stars数量 图片地址 中后台前端效果 Ant Design Pro Arco ...
- react ant design pro typescript springboot activiti权限、工作流框架
是什么? 使用springboot,activiti,mybatis,react,ant design pro,typescript 开发的后台管理系统(包含权限管理.工作流等功能),真正前后端分离的 ...
- Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建
Ant Design Pro of Vue--蚂蚁金服中后台系统框架搭建 Ant Design Pro of Vue下载安装启动步骤: 一.Ant Design Pro of Vue 的介绍 Ant ...
- iviewui php,Vue UI框架对比:Element UI、Ant Design Vue、iView
Element UI 文档:https://element.eleme.io/#/zh-CN/component/installation vue-element-admin预览:https://pa ...
最新文章
- Android 实现系统更新功能
- 【问链财经-区块链基础知识系列】 第二十二课 贸易金融区块链平台的技术机理与现实意义
- Kafka单机、集群模式安装详解(一)
- r生成新的dataframe_2020-08-11R语言中dataframe与list的转换方法
- Android安全与逆向之Java虚拟机和Dalvik虚拟机的区别
- 数据驱动创新 融合引领变革 2017中国工业大数据大会·钱塘峰会今日在杭州国际博览中心顺利举行...
- esb接口测试_接口测试用例.docx
- 为何控件删除不了_NBA开出800万合同,易建联为何却主动解约了?湖人太没诚意了...
- Python Linked List
- Redhat 6.5安装JDK和Tomcat小记
- 小蠓虫如何灭_怎样消灭蠓虫?
- Spring:pom.xml中引入依赖发红解决方案
- unity Console窗口的输出
- sde mysql_ArcSDE:企业级地理数据库概述
- PCB会过期?过期后先烘烤?
- 虚拟机安装ubuntu怎么全屏_ubuntu虚拟机怎么设置全屏显示?
- IDEA 一直Updating indexes问题解决
- codecombat 代码攻略
- Windows Terminal 配置GIT
- eclipse配置python django环境_windows下python+Django+eclipse开发环境的配置
热门文章
- 深度学习机器臂控制_基于深度强化学习的机器人手臂控制
- krpano中js控制陀螺仪开启与关闭
- AI实效成广告主新共识 百度联合艾菲共建AI营销赛道
- linux上源码安装py2exe
- python中常见的漏洞_Python常见安全漏洞及修复方法集合!你所不会的这里都有!...
- .Net Core3.1下Autofac的使用
- windows系统点击我的电脑显示找不到应用程序
- CTreeCtrl用法
- 如何在sql server 2005 中安装northwind 和 pubs 数据库
- windows磁盘黑色未分配区域扩展到逻辑驱动器