89 lines
2.2 KiB
Markdown
89 lines
2.2 KiB
Markdown
# {{projectName}}
|
||
|
||
## 开发
|
||
|
||
- install
|
||
|
||
```shell
|
||
yarn install
|
||
```
|
||
|
||
- dev
|
||
|
||
```shell[src](src)
|
||
yarn start
|
||
```
|
||
|
||
- build
|
||
|
||
```shell
|
||
yarn build
|
||
```
|
||
|
||
## 路由、布局、菜单
|
||
|
||
- 路由
|
||
- 路由配置位于`src/router/config.tsx`文件
|
||
- 配置形式类似于`ReactRouter 6`
|
||
- `menu`字段会用于菜单项显示
|
||
|
||
- 布局
|
||
- 通过修改根路由节点的`type`属性实现`顶栏+侧栏`、`仅顶栏`、`仅侧栏`的布局模式
|
||
|
||
```tsx
|
||
export const routerConfig: RootRoute = {
|
||
path: '/',
|
||
element: <Layout type={LayoutType.Default} />,
|
||
...
|
||
}
|
||
```
|
||
|
||
|
||
- 菜单会根据`路由`和`布局`自动生成
|
||
- 顶栏+侧栏：一级路由放置在`顶栏`，其余层级放置在`侧栏`
|
||
- 仅侧栏/仅顶栏：所有菜单项均在分布`侧栏/顶栏`菜单中
|
||
|
||
## 常用方法和全局变量
|
||
|
||
在每个页面内，可以使用以下常用方法和全局变量：
|
||
|
||
```
|
||
props：页面 props
|
||
params：当前页面路由参数
|
||
search：当前页面搜索参数
|
||
location：当前页面路由信息
|
||
navigate：页面跳转方法，用法：navigate('/path')
|
||
tocoServices：页面的请求
|
||
tocoRefs：页面上所有带 id 组件的 refs
|
||
tocoModals：页面上所有带 id 弹窗的 refs
|
||
```
|
||
|
||
## 目录结构
|
||
|
||
```shell
|
||
src
|
||
├── Icon.tsx # Icon组件，对应Toco前端工程的iconfont配置项
|
||
├── Root.tsx # 页面根
|
||
├── app # 应用
|
||
│ ├── common.ts # 应用配置store
|
||
│ ├── enum.ts # 枚举值
|
||
│ ├── hooks.ts # store的hook
|
||
│ ├── index.tsx # 应用入口
|
||
│ ├── langs # 多语言配置
|
||
│ ├── message.ts # 全局消息
|
||
│ ├── request.ts # 请求实例
|
||
│ ├── storage.ts # localStorage
|
||
│ └── store.ts # store实例
|
||
├── components # 组件放这里
|
||
├── index.tsx # 前端入口
|
||
├── layout # 布局
|
||
├── pages # 页面放这里
|
||
├── router # 路由
|
||
│ ├── config.tsx # 配置路由、菜单项文本、布局类型
|
||
│ ├── index.tsx # 路由导出
|
||
└── style # 全局样式
|
||
├── index.css
|
||
└── reset.css
|
||
```
|
||
|