阿里系提供企业级框架: Umi
项目简介
后台管理系统 — 中台
-
技术栈
-
umi + react全家桶 + typescript + antd + axios + ahooks …
-
项目目录介绍
- mock
- 模拟数据
- node_modules 依赖包
- src 源代码开发目录
- .umi 临时文件,不要做改动
- pages 页面
- .editorconfig 编辑器的记录文件
- .gitignore git上传忽略配置文件
- .prettierignore 忽略格式化配置文件
- .prettierrc 格式化配置文件
- .umirc.ts 项目配置文件,类似vue中的vue.config.js
- package.json 项目记录文件
- README.md 项目说明书
- tsconfig.json ts配置文件
- typings.d.ts ts的类型声明文件
- yarn.lock 插件版本锁定文件
- mock
项目构建方式
准备工作
环境准备
node版本 10.13 以上
安装yarn 和 tyarn(国内镜像源) 包管理工具
$ cnpm i yarn tyarn -g
脚手架
创建项目空文件夹
$ mkdir myapp && cd myapp
通过官方工具创建项目
$ yarn create @umijs/umi-app
-
构建界面使用插件
@umijs/plugin-layout
使用文档:https://umijs.org/zh-CN/plugins/plugin-layout
-
构建时配置
新建根目录/config/config.ts
export const config = defineConfig({ layout: { name: 'Ant Design', locale: true, layout: 'side', }, });
在根目录的 .umirc.ts 下导入config.ts
import { config } from "./config/config"; export default config
-
运行时配置
在 src/app.tsx的 export const layout = ({}) 中做如下配置:
**注:**配置之前需要构建头部和底部组件
import React from 'react'; import Footer from './components/Footer'; import HeadTitle from './components/HeadTitle'; export const layout = () => ({ rightContentRender: () => <HeadTitle />, // 右侧头部组件 footerRender: () => <Footer />, // 底部组件 onPageChange: () => { // !! 路由监听 // !! 路由改变触发该事件,一般用于做登录的页面路由拦截和重定向 }, });
-
路由配置
Layout 插件会基于 umi 的路由实现路由跳转功能
新建 config/route.ts 路由表
export const route: IBestAFSRoute[] = [ { path: '/welcome', component: '对应组件地址', name: '欢迎', icon: 'testicon', stores:[ //二级子路由 path:'', component:'', ... ] target: '_blank',// 新页面打开 headerRender: false, // 不展示顶栏 footerRender: false, // 不展示页脚 menuRender: false,// 不展示菜单 }, ];
-
全局样式
Umi 中约定 src/global.less为全局样式,此文件,会被自动引入到入口文件最前面
// 用于覆盖样式 .ant-select-selection { max-height: 51px; overflow: auto; }