插件化的企业级前端应用框架 Umijs
Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。
- 深度整合 antd、dva，比如国际化、权限、数据流、配置式路由、补丁方案、自动化 external 方面等等一线开发者才会遇到的问题。
- 约定式路由：不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。
摘要 Umijs
- 可扩展，Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。
- 开箱即用，Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。
- 企业级，经蚂蚁内部 3000+ 项目以及阿里、优酷、网易、飞猪、口碑等公司项目的验证，值得信赖。
- 大量自研，包含微前端、组件打包、文档工具、请求库、hooks 库、数据流等，满足日常项目的周边需求。
- 完备路由，同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。
- 面向未来，在满足需求的同时，我们也不会停止对新技术的探索。比如 dll 提速、modern mode、webpack@5、自动化 external、bundler less 等等。
开箱即用的中台前端/设计解决方案 ANT DESIGN PRO
- 优雅美观 - 基于 Ant Design 体系精心设计
- 常见设计模式 - 提炼自中后台应用的典型页面和场景
- 最新技术栈 - 使用 React/dva/antd 等前端前沿技术开发
- 响应式 - 针对不同屏幕大小设计
- 主题 - 可配置的主题满足多样化的品牌诉求
- 国际化 - 内建业界通用的国际化方案
- 最佳实践 良好的工程实践助你持续产出高质量代码
- Mock 数据 - 实用的本地数据调试方案
- UI 测试 - 自动化测试保障前端产品质量
体验开箱即用
环境准备
开始安装使用
npm create umi `projectName`
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.
plugin - Create a umi plugin.
选择
ant-design-pro->Pro V4->JavaScriptAnt Design Pro 脚手架将会自动安装。
常用目录说明
├── config # umi 配置，包含路由，构建等配置
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
│ └── ......
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── locales # 国际化
│ ├── models # 全局 dva model
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── global.less # 全局样式
│ └── global.jsx # 全局 JS
├── tests # 测试工具
├── README.md
└── package.json
运行项目
cd `projectName`
npm install
npm start
把之前编写组件，引入到 antd design pro 项目中
- 移动 ClassComponent \ FunctionComponent 到 components 目录下
- 修改
Welcome.jsx，使用 ClassComponent \ FunctionComponent 组件
import React from "react";
import { PageContainer } from "@ant-design/pro-layout";
import { Card, Alert, Divider } from "antd";
import { useIntl } from "umi";
// @/ 为引入别名方式，减少引用前缀
import ClassComponent from "@/components/ClassComponent";
import FunctionComponent from "@/components/FunctionComponent";
import styles from "./Welcome.less";
export default () => {
// 使用国际化，对应 locales 目录下对应文件国际化文案
const intl = useIntl();
return (
<PageContainer>
<Card>
<Alert
message={intl.formatMessage({
id: "pages.welcome.alertMessage",
defaultMessage: "欢迎使用",
})}
type="success"
showIcon
banner
/>
<ClassComponent title="Class 组件" />
<Divider />
<FunctionComponent title="Function 组件" />
</Card>
</PageContainer>
);
};
添加自定义界面
- 由于 antd design pro 集成了 umi、antd （@ant-design/xxx）、dva、react-router-dom（路由） ... 等一系列组件和插件，直接可以使用
- umi 预定式路由，直接在 pages 目录下创建对应文件（文件名称和访问时 url 一致）
- 在 pages 目录下创建 Order\list 目录，list 下创建
idnex.jsx（为显示界面）
const OrderList = () => {
return <div>订单列表</div>;
};
export default OrderList;
- 在 config 目录
routes.js文件中添加
{
name: 'order.list',
icon: 'table',
path: '/order/list',
component: './Order/list',
},
- name 菜单显示名称（国际化）
- icon 菜单显示图标
- path 路由访问地址
- component 当前路由显示组件
- authority 权限[],只有在数组中的权限才显示 ['admin'] 只有
admin权限才显示 ['user']user权限才显示
- 在 locales\zh-CN 目录，menu.js 文件添加和
name对应中文，显示菜单名称
'menu.order.list': '订单列表',
如果不设置，默认显示 name 对应的字符串，即 'order.list'
dva 状态管理
- 默认集成了 dva, 直接使用即可。
- 添加一个用户列表界面，把 React 快速上手实践 代码移过来即可
注意:
- 由于 antd design pro
routes.js中存在了 user 路由，需要加上 exact: true, 才能加 user.list，因为在routers.js中使用布局不一样。 - 详细见 移植代码
...
path: '/user',
exact: true,
component: '../layouts/UserLayout',
{
name: 'order.list',
icon: 'table',
path: '/order/list',
component: './Order/list',
},
{
name: 'user.list',
icon: 'table',
path: '/user/list',
component: './User/list',
},
...
antd design pro @ant-design/pro-layout
- 使用 PageContainer
- PageContainer 组件可以获取当前页菜单名称，设置面包屑。
import { PageContainer } from "@ant-design/pro-layout";
<PageContainer>
<Card>// Form body</Card>
</PageContainer>;
其他更多参考
其他设置在 config 目录中进行修改
config.js路由、dva、antd、主题...proxy.js开发代理接口
