Ant Design Pro 默认通过只需浏览器单方面就可处理的 HashHistory 来完成路由。如果要切换为 BrowserHistory,那在 src/index.js 中也有对应的内容可以直接修改,但需要在后端服务器进行相应路由配置。 二、详述 加载过程图 2.1、菜单→路由→组件 在左侧的导航栏点击列表页 > 标准列表后,可以进入到上面截图所示的页面。
1.0版本之前点击菜单加载页面 效果如下图 就是首次 加载的页面都会有这个 loading的效果 之后 就不会再有了 1.0版本之后 点击菜单加载 页面 效果如下图 感觉1.0版本之后 首次点击菜单 直接加载的是页面的数据 没有组件loading的那种感觉 PS:最奇怪是1.0版本之后 只有“监控页面”这个菜单首次点击 有那个loading的效果...
antd: true // 开启Ant Design功能 }] ] }; 1. 2. 3. 4. 5. 6. 7. 8. 2.2、小试牛刀 接下来,我们开始使用antd的组件,以tabs组件为例,地址:https://ant.design/components/tabs-cn/ 效果: 参考官方给出的示例,进行使用,创建MyTabs.js文件: import React from 'react' import {Tabs} from 'ant...
如果要切换为 BrowserHistory,那在 src/index.js 中也有对应的内容可以直接修改,但需要在后端服务器进行相应路由配置。 二、详述 加载过程图 2.1、菜单→路由→组件 在左侧的导航栏点击列表页 > 标准列表后,可以进入到上面截图所示的页面。导航栏的内容在src/common/menu.js中【或者服务获取的地址】 菜单: { name...
参看地址:https://pro.ant.design/docs/new-page-cn 这里的『页面』指配置了路由,能够通过链接直接访问的模块,要新建一个页面,通常只需要在脚手架的基础上进行简单的配置。 二、开发步骤 2.1、新增js、less文件 在src/routes下新建页面的NewPage.js 及 NewPage.less 文件,如果相关页面有多个,可以新建一个文件夹...
让我们选择,我们必然选择的是第二种,从服务器加载menu,并且使用icon图标。 2.代码演示 如下,是官方文档的从服务器加载menu,并给它赋值icon的代码。 import { HeartOutlined, SmileOutlined } from '@ant-design/icons';import type { MenuDataItem } from '@ant-design/pro-components';import { PageContainer,...
由于公司业务需要目前在研究阿里的 Ant Design, 后来发现他们有现成的脚手架Ant Design Pro 拿过来看了下,确实很符合我们的要求,从开发、测试、构建部署等等基本上打通了各个环节,无脑用就好了。但是发现了几个比较麻烦的事情 比如: 一.菜单是写死的,是从一个叫menu.js中提取到的 ...
React 这一框架相对于原生框架及VUE框架来讲相对于要严谨一些,在使用这一框架得过程中,页面得接口调用是我认为与其他框架区别较为不同得,因为它得逻辑存在于三个文件之间,下面就以我自己得实践过程来梳理一下接口调用得过程。 1. 了解接口调用得目录结构 ...
第一篇介绍了如何从git上拉取ant design vue pro脚手架并使用VS Code编辑器启动脚手架。在第二篇开始之前，我们先打开VS Code软件加载脚手架代码，并运行命令 npm run serve命令启动脚手架！通过浏览器访问地址：http://localhost:8000进入登录首页。系统登录首页如下图所示：自定义设置登录页面 ant design vue pro...
ant design pro 经过调研目前市面上已有的微前端方案,主要以下 6 种: 使用HTTP 服务器(多为 nginx)的路由来重定向多个应用 在不同的框架之上设计通讯、加载机制,诸如Mooa和Single-SPA 通过组合多个独立应用、组件来构建一个单体应用 iFrame。使用 iFrame 及自定义消息传递机制 ...