Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。 Ant Design 是一套企业级 UI 设计语言和 React 组件库。
这个过程中最重要的就是数据的流转,页面中用户输入的用户名和密码通过antd封装的组件传递到login页面的handleSubmit方法中,也就是values对象。values对象是ant design pro封装的Login组件控制的,点击submit后就把用户名和密码的输入框中的数据封装成一个json对象,格式如下: { username: "admin", password: "123456" ...
plugin - Create a umi plugin. 选择模板后,会弹出选择版本,我们选择v5(v5默认是typescript版本,也是antd pro的最新开发模式,v4可以选择javascript/typescript两种版本,如果不想用typescript方式,可以选择v4,然后再选择javascript即可。 Ant Design Pro 脚手架将会自动安装... 运行Antd Pro(Ant Design Pro,下文简称An...
config.output .filename(static/js/[name].[contenthash:8].${versionInfo.version}.js) .chunkFilename(static/js/[name].[contenthash:8]chunk.${versionInfo.version}.js); } } © 版本信息 Ant Design Pro 6.0.0 umi 版本 4.0 浏览器环境 谷歌浏览器116.0.5845.141(正式版本) 开发环境 windows 10 ...
这段代码创建了一个简单的页面组件,并使用了PageContainer和@ant-design/pro-layout组件。 步骤5:使用组件 在页面组件中,你可以使用 Ant Design Pro 提供的组件来构建你的页面。例如,你可以在Index.js中添加一个表格组件: import{Table}from'antd';constdataSource=[{key:'1',name:'John Brown',age:32},{ke...
通常布局是和路由系统紧密结合的,Ant Design Pro 的路由使用了Vue-Router的路由方案,为了统一方便的管理路由和页面的关系,我们将配置信息统一抽离到config/router.config.js下,通过如下配置定义每个页面的布局: // eslint-disable-next-line import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } fr...
Ant Design Pro 开箱即用的中台前端/设计解决方案。 预览:http://preview.pro.ant.design 首页:http://pro.ant.design/index-cn 使用文档:http://pro.ant.design/docs/getting-started-cn 更新日志: http://pro.ant.design/docs/changelog-cn 常见问题:http://pro.ant.design/docs/faq-cn 国内镜像:http:...
Ant Design Pro 是一个完整的前端解决方案,专为企业级中后台应用而设计。它基于 Ant Design 设计语言,采用 React 技术栈,并集成了 UmiJS 和 Dva 等工具。以下是对 Ant Design Pro 架构的详细分析: 总体架构 我们可以通过下面的大图来了解整个 Ant Design Pro 的架构。
/* 基本信息,包括项目名称和项目版本 */ "name": "ant-design-pro", "version": "2.1.1", "description": "An out-of-box UI solution for enterprise applications", "private": true, /* scripts指定了运行脚本命令的npm命令行缩写 */ /* 如 npm run start,就是执行 start 定义的命令 */ ...
而作为一名全栈开发者,鱼皮个人喜欢使用 Ant Design 和 Ant Design Pro 全家桶的重要原因是:Ant Design 同时有Vue和React的实现版本,无论我选择什么前端框架开发项目,都能保持编码和网站效果的一致性,进一步提高开发效率。 换言之,学这一套组件库就足够了!