# umijs4-simple-app

**Repository Path**: scopesang/umijs4-simple-app

## Basic Information

- **Project Name**: umijs4-simple-app
- **Description**: 基于v4.umijs/simple-app模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-17
- **Last Updated**: 2026-01-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# UmiJS 4 简单应用示例

这是一个基于 UmiJS 4 框架构建的简单 Web 应用示例项目。

## 项目简介

本项目展示了 UmiJS 4 的基本功能和应用结构，适合作为学习 UmiJS 框架的入门示例。项目包含了用户管理、计数器功能等常见页面模块。

## 技术栈

- **框架**: UmiJS 4
- **语言**: TypeScript
- **包管理器**: pnpm
- **样式**: Less

## 项目结构

```
├── config/                    # 配置文件目录
│   ├── config.ts             # 主配置文件
│   └── routes.js             # 路由配置
├── src/                      # 源码目录
│   ├── assets/              # 静态资源
│   │   └── yay.jpg
│   ├── layouts/             # 布局组件
│   │   ├── index.less
│   │   └── index.tsx
│   ├── pages/               # 页面组件
│   │   ├── 404.tsx          # 404页面
│   │   ├── count.tsx        # 计数器页面
│   │   ├── index.tsx        # 首页
│   │   └── user/            # 用户相关页面
│   │       ├── detail.tsx
│   │       ├── order.tsx
│   │       ├── profile.tsx
│   │       └── user.tsx
│   ├── global.less          # 全局样式
│   ├── global.ts            # 全局配置
│   ├── favicon.ico          # 网站图标
│   └── loading.tsx          # 加载组件
├── app.ts                   # 应用配置
├── package.json             # 项目依赖
├── tsconfig.json           # TypeScript配置
└── typings.d.ts            # 类型声明文件
```

## 主要功能

### 用户管理模块
- **用户列表** (`/user`): 用户管理主页面
- **用户详情** (`/user/detail`): 查看用户详细信息
- **用户订单** (`/user/order`): 管理用户订单
- **用户资料** (`/user/profile`): 用户个人资料页面

### 其他功能
- **计数器** (`/count`): 简单的计数器功能演示
- **首页** (`/`): 应用主页
- **404页面**: 页面未找到时的错误处理

## 快速开始

### 环境要求

- Node.js >= 14
- pnpm >= 6

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
pnpm dev
```

### 构建生产版本

```bash
pnpm build
```

### 预览生产版本

```bash
pnpm preview
```

## 配置说明

### 路由配置

路由配置位于 `config/routes.js`，定义了应用的页面路由结构。

### 应用配置

应用的主要配置在 `app.ts` 文件中，包括全局的运行时配置。

### TypeScript 配置

TypeScript 编译配置在 `tsconfig.json` 文件中。

## 开发指南

### 新增页面

在 `src/pages/` 目录下创建新的页面文件，UmiJS 会自动根据文件结构生成路由。

### 新增布局

在 `src/layouts/` 目录下创建布局组件，可以在多个页面间共享统一的页面结构。

### 全局样式

全局样式定义在 `src/global.less` 文件中，会应用到所有页面。

## 许可证

本项目遵循项目仓库中的许可证协议。