# umi_react_antd-mobila

**Repository Path**: music_poor/umi_react_antd-mobila

## Basic Information

- **Project Name**: umi_react_antd-mobila
- **Description**: 开箱只用的react 移动端框架。
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-02-04
- **Last Updated**: 2025-04-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Medalsoft Framework说明V2.0

开箱即用 umi+react+antdmobila

- 移动端注意点在设置盒子高度时慎用vh 这不是大屏需要在整个视口展示，高度设置成100%

## 项目结构

```
├─public
│  └─images      			# 公共资源，目录下所有文件会被 copy 到输出路径
└─src
│  ├─app					# 请求处理、项目配置、api等
│  │  ├─index			  # config全局配置
│  │  ├─config     	# 项目其他配置
│  │  ├─theme				# 主题配置，antd主题配置、styledComponents配置
│  │  └─api          		# api文件
│  ├─assets          		# 静态资源
│  ├─components     		# 通用组件
│  ├─layouts        		# 顶层组件，全局服务注入/布局相关组件
│  ├─locales   				# 多语言，参考umi文件
│  ├─modules  				# 功能领域模块，基于业务模块进行划分
│  ├─pages  				# 与页面路由地址对应，纯视图/布局/领域资源组合组件、注入Service，无业务逻辑
│  │  ├─document.ejs		# 自定义html模板
│  │  └─App   			
│  │     ├─news.tsx  		# 路由页面,对当前页面用到的资源组件进行组合
│  │     └─_layout.tsx   	# 当前路由层级路由公用容器，公用页面布局/Service注入
│  ├─tools       			# 通用工具方法，按功能进行划分
│  └─app.tsx				# 运行时配置、项目全局运行时配置
├─.editorconfig				# 编辑器配置文件
├─.prettierignore 			# prettier格式化忽略文件清单
├─.prettierrc	  			# prettier格式化配置
├─.umirc.ts		  			# umi配置文件
├─.umirc.XXX.ts		  		# umi XXX环境配置文件
└─typings.d.ts	  			# 全局类型声明

```

### Pages

根据项目页面路由创建文件，默认情况下采用UMI的[约定式路由模式](#路由配置)，框架对`src/pages`文件及文件夹自动进行路由映射



#### 命名

`pages`下内容在[基于UMI的路由约定](https://umijs.org/zh-CN/docs/convention-routing)基础上，会存在以下几种内容

- 文件夹：pages下除了特殊文件夹，所有文件夹均会对路由产生层次划分用的作用
  - 命名规则：全小写，多个单词以`-`拼接
- 文件：除umi定义的特殊文件外，均作为页面路由
  - 命名规则：全小写，多个单词以`-`拼接
- `**\components\**`：路由公用布局组件
  - 命名规则：文件夹下组件，按常规组件命名，使用大驼峰命名，`index`使用小写
- `document.ejs`: `html`模板
- `**\_layout.tsx`：框架限定布局组件，作为每个路由层次下所有路由的公用布局




## Umi

### 文件说明

- `.umirc.ts`：[umi配置文件](https://umijs.org/zh-CN/docs/config)

- `app.tsx`：[运行时配置](https://umijs.org/zh-CN/docs/runtime-config)


#### 初始路由说明

项目使用umi约定式路由，默认页面地址为`http:localhost:8000`

浏览器输入`http:localhost:8000`，由于没有hash路由值，会默认进入`pages/index.tsx`页面



### 多环境配置

`{ENV}`表示环境变量名，根据项目需要替换为所需的字符串



**1、根目录下新建`.umirc.{ENV}.ts`文件**

```ts
export default {
  define: {
    'process.env.MEDALENV': '{ENV}',
  },
}
```



**2、`package.json`中`scripts`添加命令**

```json
 {
    "start": "umi dev",
    "build:{ENV}": "cross-env UMI_ENV={ENV} umi build",
 }
```

执行`build:{ENV}`命令将会查找`.umirc.{ENV}.ts`作为打包配置文件进行打包



**3、`src/app/config/config.js`中根据需要进行系统环境变量设置**



### IE兼容配置



修改`.umirc.ts`配置

```typescript
 export default defineConfig({ 
  // ...其他配置
  targets: {
    ie: 11,
  },
  fastRefresh: false, // 不填写使用默认值，fastRefresh默认关闭，
  nodeModulesTransform: {
    type: 'all',
  });
```


### 部署

- 一般部署：直接将dist文件夹下所有内容拷贝至托管处即可
- html与静态资源分离：`.umirc.ts`增加`runtimePublicPath : true`配置，`document.ejs`中增加代码` window.resourceBaseUrl = '资源路径'`
- html与js、css分离：`.umirc.ts`的`publicPath`配置为需要的子路径



## 常用库资料

- [antd](https://ant.design/components/overview-cn/)
- [ProComponents](https://procomponents.ant.design/)
- [umi](https://umijs.org/)
- [react](https://reactjs.org/)
- [typescript](https://www.typescriptlang.org/)
- [ant.design.mobile] (https://mobile.ant.design/zh)