如何进行前端UI框架AntDesignPro分析
这篇文章将为大家详细讲解有关如何进行前端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
启动完成后会自动打开浏览器访问 http://localhost:8000,你看到下面的页面就代表成功了。
Ant Design Pro 的布局
在 Ant Design Pro 中,我们抽离了使用过程中的通用布局,都放在 layouts 目录中,分别为:
BasicLayout:基础页面布局,包含了头部导航,侧边栏和通知栏。
UserLayout:抽离出用于登陆注册页面的通用布局
BlankLayout:空白的布局
如何使用 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' }, ], }, ], }]
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
文件夹中方便管理。需要注意的是,这些布局组件和我们平时使用的其它组件并没有什么不同,只不过功能性上是为了处理布局问题。
关于如何进行前端UI框架Ant Design Pro分析就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
当前标题:如何进行前端UI框架AntDesignPro分析
分享路径:http://scyanting.com/article/ihpdhh.html