101 lines
1.7 KiB
Markdown
101 lines
1.7 KiB
Markdown
# 泽林前端项目
|
||
|
||
基于 Umi4 + Ant Design 5 的企业级前端项目模板。
|
||
|
||
## 技术栈
|
||
|
||
- **Umi 4** - 企业级前端开发框架
|
||
- **Ant Design 5** - 企业级 UI 组件库
|
||
- **React 18** - JavaScript 库
|
||
- **TypeScript** - 类型安全
|
||
|
||
## 功能特性
|
||
|
||
- ✅ 基础路由配置
|
||
- ✅ Mock 数据模拟
|
||
- ✅ 全局反向代理
|
||
- ✅ 布局组件
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
├── mock/ # Mock 数据
|
||
│ └── user.ts # 用户相关接口模拟
|
||
├── src/
|
||
│ ├── layouts/ # 布局组件
|
||
│ │ └── BasicLayout.tsx
|
||
│ ├── pages/ # 页面组件
|
||
│ │ ├── Home/
|
||
│ │ ├── About/
|
||
│ │ ├── User/
|
||
│ │ ├── Login/
|
||
│ │ └── 404/
|
||
│ └── global.less # 全局样式
|
||
├── .umirc.ts # Umi 配置文件
|
||
├── package.json
|
||
└── README.md
|
||
```
|
||
|
||
## 快速开始
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
## 配置说明
|
||
|
||
### 路由配置
|
||
|
||
路由在 `.umirc.ts` 中配置：
|
||
|
||
```ts
|
||
routes: [
|
||
{
|
||
path: '/',
|
||
component: '@/layouts/BasicLayout',
|
||
routes: [
|
||
{ path: '/home', component: '@/pages/Home' },
|
||
{ path: '/about', component: '@/pages/About' },
|
||
{ path: '/user', component: '@/pages/User' },
|
||
],
|
||
},
|
||
]
|
||
```
|
||
|
||
### Mock 配置
|
||
|
||
Mock 文件放在 `mock/` 目录下，Umi 会自动加载。
|
||
|
||
### 反向代理配置
|
||
|
||
在 `.umirc.ts` 中配置：
|
||
|
||
```ts
|
||
proxy: {
|
||
'/api': {
|
||
target: 'http://localhost:8080',
|
||
changeOrigin: true,
|
||
pathRewrite: { '^/api': '' },
|
||
},
|
||
}
|
||
```
|
||
|
||
## 默认账号
|
||
|
||
- 用户名: admin
|
||
- 密码: 123456
|