Antd Pro官方文档地址: Antd Pro 文档
此篇涉及到的配套技术文档:
官网的安装步骤:
yarn create umi
or npm create umi
Select the boilerplate type (Use arrow keys)
❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
app - Create project with a simple boilerplate, support typescript.
block - Create a umi block.
library - Create a library with umi.
plugin - Create a umi plugin.
Ant Design Pro 脚手架将会自动安装。【TIPS】我安装的时候还额外询问了安装TS or JS版本、simple or complexe版本,我选的是JS版本,然后simple和complexe版本我各下了一份(用complexe来做参考和备份)。
成功初始化后的项目目录结构如下:
├── config # umi 配置,包含路由,构建等配置
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # 全局 dva model
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── global.less # 全局样式
│ └── global.ts # 全局 JS
├── tests # 测试工具
├── README.md
└── package.json
需要说一下的是config目录:
config
├── config.dev.js // 开发环境的一些配置,大部分时候不需要动
├── config.js // umiJS的配置:包含dva、国际化、主题色、路由、代理等
├── defaultSettings.js // 对项目界面及iconfont的配置:导航主题、主题色、布局、页面标题、iconfont路径等,即官网预览项目右边设置按钮所设置的内容
├── proxy.js // 请求的代理【后面讲服务器交互时介绍】
└── routes.js // 路由的配置【配置好后将文件导出到config.js中配置给:routes。如果路由不复杂可以直接在config.js中配置】
我们的主要业务逻辑大部分都在src
目录下,官方也给出了推荐的src目录代码结构:
src
├── components
└── pages
├── Welcome // 路由组件下不应该再包含其他路由组件,基于这个约定就能清楚的区分路由组件和非路由组件了
| ├── components // 对于复杂的页面可以再自己做更深层次的组织,但建议不要超过三层
| ├── Form.tsx
| ├── index.tsx // 页面组件的代码
| └── index.less // 页面样式
├── Order // 路由组件下不应该再包含其他路由组件,基于这个约定就能清楚的区分路由组件和非路由组件了
| ├── index.tsx
| └── index.less
├── user // 一系列页面推荐通过小写的单一字母做 group 目录
| ├── components // group 下公用的组件集合
| ├── Login // group 下的页面 Login(“二级页面”)
| ├── Register // group 下的页面 Register
| └── util.ts // 这里可以有一些共用方法之类,不做推荐和约束,看业务场景自行做组织
└── * // 其它页面组件代码
项目成功跑起来之前还需要按照package.json
文件将依赖安装到本地:npm install
之后就可以通过npm run dev
或者yarn start
跑起来了
在 config/routes.js
文件中配置新页面的路由:
路由的具体配置可参见umiJS官方文档:路由配置
{
path: '/index', // 路径配置
name: 'indexTrader', // 菜单项名字&页面title名字,如项目需配置国际化则需要与国际化文档保持一致
icon: 'AppstoreOutlined', // 菜单项图标
component: './Index' // 页面组件
}
routes.js
路由配置说明路由文件的配置大致如下:
export default [
{
path: '/',
component: '../layouts/BlankLayout', // 存放空白布局的地址
routes: [
{
path: '/user',
component: '../layouts/UserLayout',
routes: [
{ name: 'login', path: '/user/login', component: './User/login', },
],
},
{
path: '/',
component: '../layouts/SecurityLayout,
routes: [
{
path: '/',
component: '../layouts/BasicLayout',
authority: ['admin', 'user'], // 表示此页面仅 admin 和 user权限用户可进入
routes: [
{ path: '/', redirect: '/indexTrader' },
{ path: '/indexTrader', name: 'indexTrader', icon: 'AppstoreOutlined' , component: './IndexTrader' }
// ... 其他页面路由 ★★★
]
}
]
}
]
},
{
component: './404',
}
]
每嵌套一层布局文件,就需要在该路径下新增一层{ path: '<新布局匹配的路径>', component: '<新布局文件地址>', routes: <需应用新布局的页面路由>}
。此外,在最后应加上一个404页面,作为上述路由都没有匹配项时的显示页面。
一般情况下,我们新增页面都应该配置在代码中标“★★★”处。
name
名称的配置及其国际化使用的时候只需要保证name
和各语言配置文档中menu.xx
的xx
部分保持一致即可,之后在界面中切换语言可自动替换生效。
菜单项名称和页面title值显示逻辑:
indexTrader
的各语言配置就采用文档中的配置名称name
的值:indexTrader
举个栗子:
国际化配置文档src/locales/zh-CN/menu.js
中有以下配置:
export default {
'menu.indexTrader': '控制台',
}
src/locales/en-US/menu.js
中有以下配置:
export default {
'menu.indexTrader': 'Dashboard',
}
则上述路由在中文界面的菜单项上会显示出控制台,而在英文界面上则显示Dashboard。
【TIPS】pro中的布局采用的是ProLayout,里面内置了包括国际化的很多功能并提供相关配置项,详情参见官方文档:ProLayout-API配置
icon
图标配置及iconfont图标的使用如使用antd的图标,直接将图标名称填入icon
配置项即可。
如使用iconfont的图标,ProLayout提供了iconfontUrl
配置项,直接填入iconfont的url地址即可。如需全局使用iconfont,可在defaultSetting.js
文件中配置,配置项同为iconfontUrl
。
iconfontUrl
可在iconfont官网的需要引入的项目中找到:defaultSettings.js
文件中配置:const proSettings = {
navTheme: 'dark',
primaryColor: '#1890ff',
...
iconfontUrl: '//at.alicdn.com/t/font_4564564_5wefewrfwre.js' // 此项替换为你自己的iconfont项目地址,即上述图片中复制的部分
}
{
path: '/assessment',
name: 'assessment',
icon: 'icon-assessment',
component: './Assessment',
}
icon的配置值为iconfont中下述图中红框部分的值:src/pages
目录下新建文件夹Assessment
(推荐首字母大写),并在该目录下新建文件:
index.js
页面内容index.less
页面样式文件index.js
举例:
import React, { Component, Fragment } from 'react';
class Assessment extends Component {
render() {
return (
<Fragment>
<p>Alpha 评级</p>
</Fragment>
);
}
};
export default Assessment
【TIPS】如此页面还有私有的组件,可在该目录下创建components
文件夹存放组件文件。
配置好上述参数后,重启项目(修改了配置文件之后最好重新跑一次项目,否则新配置可能不生效),即可看到菜单栏出现了一个新页面!
antd pro示例项目有四种布局文件:
BlankLayout
、BasicLayout
、SecurityLayout
、 UserLayout
下面简单介绍一下各个布局的基本用法:
BlankLayout
空白布局空白布局的代码很简单,主要是作为容器来使用(所有页面都应包裹在这个容器里)。
它的作用主要是在不同环境中返回“不同的容器”:
react-dev-inspector
的Inspector
组件作为项目的最外层容器Fragment
(即项目中常用的<>>
)作为项目的最外层容器BlankLayout.jsx
// BlankLayout.jsx
import React from 'react';
import { Inspector } from 'react-dev-inspector';
const InspectorWrapper = process.env.NODE_ENV === 'development' ? Inspector : React.Fragment;
const Layout = ({ children }) => {
return <InspectorWrapper>{children}</InspectorWrapper>;
};
export default Layout;
react-dev-inspector
的Inspector
组件的作用:
可以从页面上识别react组件,直接跳转到本地ide的代码片段上
此功能是方便开发时从页面组件上定位对应代码片段,故在生产环境中无需使用,就有了代码中第三行的判断。
【TIPS】最外层容器,将空白布局作为routes.js
文件最外层的配置即可:
export default [
{
path: '/',
component: '../layouts/BlankLayout', // 存放空白布局的地址
routes: [
{ path: '/user', component: '' }
]
}
]
UserLayout
抽离出用户登录注册页面的通用布局
SecurityLayout
验证用户登录状态,验证通过则正常访问内部页面,未通过则跳转到登录界面。
BasicLayout
基础页面布局,包含了头部导航、侧边栏和通知栏