# 安装依赖
$ yarn install
# 启动服务
$ yarn start # visit http://localhost:3333
$ yarn run dev # 启用 mock serve
├── build/ # 构建产物
├── mock/ # 本地模拟数据
│ ├── index.[j,t]s
├── configs/ # 项目配置
│ └── routes 路由配置
├── public/
│ ├── index.html # 应用入口 HTML
│ └── favicon.png # Favicon
├── src/ # 源码路径
│ ├── assets/ # 静态资源
│ ├── components/ # 自定义业务组件
│ │ └── guide/
│ │ ├── index.[j,t]sx
│ │ ├── index.module.scss
│ ├── hooks/ # 自定义 Hooks
│ ├── layouts/ # 布局组件
│ ├── locales/ # 多语言配置
│ ├── models/ # 应用级数据状态
│ │ └── useUserModel.[j,t]s
│ ├── pages/ # 页面
│ │ └── home/ # home 页面,约定路由转成小写
│ │ ├── components/ # 页面级自定义业务组件
│ │ ├── useHomeModel.[j,t]sx # 页面级数据状态
│ │ ├── services.[j,t]sx # 页面级数据请求
│ │ ├── index.[j,t]sx # 页面入口
│ │ └── index.module.scss # 页面样式文件
│ ├── services/ # 应用级别的数据请求
│ ├── utils/ # 工具库
│ ├── styles/ # 应用级别样式定义, 及样式工具库
│ ├── global.less # 全局样式
│ └── app.[j,t]s[x] # 应用入口脚本
├── build.config.json # 工程配置
├── README.md
├── package.json
├── .commitlintrc.js
├── .editorconfig
├── .eslintignore
├── .eslintrc.[j,t]s
├── .gitignore
├── .prettierignore
├── .prettierrc.js
├── .stylelintignore
├── .stylelintrc.[j,t]s
├── .gitignore
└── [j,t]sconfig.json
基础配置参考 ice 的路由配置.
框架在这基础上做了扩展, 将侧边栏导航和选项卡的配置整合进 pageConfig
配置中.
type ICustomRouterConfig = IRouterConfig & {
pageConfig?: {
title?: string; // 标题
scrollToTop?: boolean; // 配置页面准入权限角色列表
auth?: string[]; // 配置页面准入权限角色列表
errorBoundary?: boolean; // 默认 false,进入页面时是否要滚动到顶部
icon?: string | ReactElement; // 图标. 侧边栏和选项卡都会用到
fixed?: boolean; // 是否固定选项卡. PageTabs 组件配置参数
keepAlive?: boolean; // 是否缓存页面. PageTabs 组件配置参数
closeTips?: boolean | ((callbackFn: () => boolean) => void); // 是否需要关闭提示. PageTabs 组件配置参数
locale?: string; // 自定义菜单的国际化 key
hideInMenu?: boolean; // 在菜单中隐藏自己和子节点
hideInBreadcrumb?: boolean; // 在面包屑中隐藏
hideChildrenInMenu?: boolean; // 会把这个路由的子节点在 menu 中隐藏
flatMenu?: boolean; // 隐藏自己,并且将子节点提升到与自己平级
target?: string; // 指定外链打开形式,同a标签
[key: string]: any;
};
};
基础方案参考 ice 的路由配置.
在此基础上, 覆写了 antd 的配置文件, 实现自定义样式, 配置文件在 src/styles/theme.less
这个目录.
module css 方案要注意, 文件名称需要加
.module.[c|sa|le]ss
的后缀, 和 umijs 的样式方案不同.
我目前的版本是 2.1.1, 样式有坑, theme.less 的文件开发下会失效, 打包又是正常的. 所以, 自定义样式要改两个地方, 一个是 build.config.js 文件, 一个是 theme.less文件
项目要使用非 antd 库的图标, 提供了组件 Icon
组件来使用 iconfont
字体图标. 在 public.html
页面注入 iconfont
的文件, 页面通过组件可以直接使用.
基础方案参考 ice 的数据请求.
在此基础上封装了 ice 提供的 useRequest
方法. (不使用 ahooks 的 useRequest, 引包的时候需要注意路径).
参考 ice 文档的 数据Mock
放弃使用 ice 自带的 store 方案.
本项目使用 hox
方案, 比较轻量一些, 使用方法参考文档.
Hooks 基础引用 [email protected]
, 参考文档.
使用的时候统一引用 import { xxx } from '@/hooks'
.
提供的其他 hooks, 请参考对应 hooks 下的 README.md 文件, 或者文档注释.
使用方式, import { xxx } from '@/utils'
.
具体说明参考工具函数的 README.md 文件, 或者文档注释.
缓存集成 store2
.
使用方式, import { storage } from '@/utils'
.
具体使用方式参考 src/utils/storage.ts
的文档注释.
参考 ice 的静态资源处理.
基础方案使用 react-intl
, 使用方法参考文档.
设置全局语言方案和读取全局语言方案使用 import { getLocale, setLocale } from '@/utils'
.
使用方法参考 src/components/pageTabs/README.md
文档.
参考 ice 文档的 环境配置