如何增强 Ant Design of Vue 框架的报表能力-1
本帖最后由 Lenka.Guo 于 2021-4-2 15:48 编辑Ant Design of Vue 介绍AntDesign of Vue是基于 Ant Design 的规格说明，开发的Vue UI 库，包含了一系列高质量的控件和示例，帮助您快速搭建功能强大的交互功能系统框架。AntDesign 作为一门设计语言面世，也是通过多年的迭代和积累，它对 UI 的设计思想已经成为一套事实标准，ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步，组件的 html 结构和 css 样式也保持一致，真正做到了样式 0 修改，组件 API 也尽量保持了一致。能够助力开发人员，快速搭建强大且美好的系统网站。AntDesign Pro 是一个企业级中后台前端/设计解决方案，我们秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验 AntDesign Vue 在初始化安装完成后，会自动创建整套的Demo样式，包含多个典型模板 Dashboard - 结果- 成功页- 失败页-异常- 403 无权限- 404 找不到- 500 服务器出错-个人页- 个人中心- 个人设置-图形编辑器- 流程图编辑器- 脑图编辑器- 拓扑编辑器-帐户- 登录- 注册- 注册成功- 分析页- 监控页- 工作台-表单页- 基础表单页- 分步表单页- 高级表单页-列表页- 查询表格- 标准列表- 卡片列表- 搜索列表（项目/应用/文章）-详情页- 基础详情页- 高级详情页 Ant Design Vue 的报表功能 是开箱即用的框架产品，很多注册表单关联到业务数据即可直接使用，但是我们在整套的框架中往往需要做大量的数据展示，而AntDesignz主要优势在于提供了非常强大且易用的交互能力，但数据展示还需要做很多的增强，尤其是中国式复杂报表，类Word报告类报表，数据透视表，条码报表，交互式报表等。 除了 antd 组件以及脚手架内置的业务组件，提供了还需要引入其他外部模块扩展的能力，我们在市面中寻找到了专业的前端 报表工具ActiveReportsJS 来帮助我们解决和补充报表展示能力。快速搭建 Ant DesignVue Pro 环境准备本地环境需要安装 yarn、node 和 git。我们的技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd，提前了解和学习这些知识会非常有帮助。 安装Ant Design Pro 脚手架。yarn create umi 或执行 npm createumi 选择 ant-design-pro：
如此会快速生成一个完整的系统框架，提供了各类功能，以下是目录结构：
页:
[1]