65 lines
2.7 KiB
Markdown
65 lines
2.7 KiB
Markdown
# 当前框架技术栈说明
|
||
|
||
本目录讲上手这套脚手架需要的概念。本仓库怎么分层、模块之间数据怎么走，见 [项目架构](../项目文档/项目架构.md)。新代码怎么命名、怎么接进容器，见 [代码撰写规范](../项目文档/代码撰写规范.md)。
|
||
|
||
## 目录
|
||
|
||
- [阅读顺序](#阅读顺序)
|
||
- [技术栈](#技术栈)
|
||
- [样式](#样式)
|
||
- [路由怎么挂页面](#路由怎么挂页面)
|
||
|
||
## 阅读顺序
|
||
|
||
1. 本文。
|
||
2. [DDD是什么](./DDD是什么.md)。知道四层、聚合根和端口各自放什么。
|
||
3. [DI是什么](./DI是什么.md)。知道类怎样进容器，页面怎样拿到它们。
|
||
4. [mobx是什么](./mobx是什么.md)。知道页面状态、实体和快照。
|
||
5. [常见设计模式及使用](./常见设计模式及使用.md)。只看本仓库用到的几种。
|
||
6. [代码实践](./代码实践.md)。沿登录走一遍。
|
||
|
||
国际化、数据库、Worker 的用法在 `doc/项目文档/基础应用/`。界面组件使用 Ant Design，不在本目录展开。
|
||
|
||
## 技术栈
|
||
|
||
| 作用 | 库 |
|
||
|---|---|
|
||
| 界面 | React |
|
||
| 路由 | React Router。路由表在 `src/app/routes.ts` |
|
||
| 构建 | Vite。环境文件在 `src/`，只暴露 `VITE_` 开头的变量 |
|
||
| 语言 | TypeScript。装饰器需要 `experimentalDecorators` 和 `emitDecoratorMetadata` |
|
||
| 依赖注入 | Inversify。容器在 `src/app/di/root_container.ts` |
|
||
| 页面状态 | MobX，配合 `mobx-react-lite` 的 `observer` |
|
||
| 实体 | mobx-keystone 的 `@model` |
|
||
| 请求 | axios。封装在 `src/app/network` |
|
||
| 文案 | i18next |
|
||
| 样式 | Sass |
|
||
|
||
路径别名 `@/` 指向 `src/`。跨目录用它，同一功能模块内部用相对路径。
|
||
|
||
## 样式
|
||
|
||
组件样式用同名 `.scss`，在组件文件里 import。主题色由 `src/app/theme` 解析后交给 Ant Design，不在每个组件里各写一套亮色和暗色。
|
||
|
||
## 路由怎么挂页面
|
||
|
||
页面不自己注册路由。`src/app/routes.ts` 把 URL 指到 `presentation` 下的页面文件，页面使用默认导出。
|
||
|
||
```ts
|
||
export default [
|
||
layout('routes/app_shell.tsx', [
|
||
index('../features/home/presentation/home/home.tsx'),
|
||
layout('routes/layouts/guest.layout.tsx', [
|
||
route('security', '../features/security/presentation/security/security.tsx'),
|
||
]),
|
||
layout('routes/layouts/auth.layout.tsx', [
|
||
route('editor/:projectId', '../features/editor/presentation/editor/editor.tsx'),
|
||
]),
|
||
]),
|
||
] satisfies RouteConfig;
|
||
```
|
||
|
||
`app_shell` 提供文案和主题。`guest` 只允许未登录进入，例如 `/security`。`auth` 只允许已登录进入，例如 `/editor/:projectId`。判断使用 `hasSession()`，规则在 `decideRoutePolicy`。
|
||
|
||
新增页面时：在功能模块的 `presentation` 写下默认导出的页面，再在这张表里登记路径和布局。
|