zeling_f/README.md

泽林前端项目

基于 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

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

配置说明

路由配置

路由在 .umirc.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 中配置：

proxy: {
  '/api': {
    target: 'http://localhost:8080',
    changeOrigin: true,
    pathRewrite: { '^/api': '' },
  },
}

默认账号

• 用户名: admin
• 密码: 123456