# umi3-antd4-demo

**Repository Path**: zhangjunya/umi3-antd4-demo

## Basic Information

- **Project Name**: umi3-antd4-demo
- **Description**: 基于 umi3 和 antd4 搭建的项目骨架
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://test-9gwkw9rfef84c2f6-1254005732.tcloudbaseapp.com/umi3/mch/#/login
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2020-11-06
- **Last Updated**: 2023-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 使用 `umi3.0` 开发 `web` 项目

## 重要依赖

- umi@3
- antd@4
- ahooks
- dayjs

## 开始项目

安装依赖,

```bash
$ yarn
```

开启服务,

```bash
$ yarn start
```

## 修改端口

打开 [.env](./.env) 文件，设置服务端口      

## 在项目中引用图片

1. 将需要使用的图片放置于 `assets` 目录下
2. 在 `jsx` 中使用
```
<img src={require('@/assets/logo.jpg')}>
```
3. 在 `css` 中使用
```
background: url('~@/assets/logo.jpg');
```


## 相关配置

前往项目 [配置文件](./config/config.js)      


## 重点配置

- ### 使用哈希路由

```
history: {
  type: 'hash',
}
```

- ### 指定本地服务的代理

前往 [proxy](./config/proxy.js) 进行设置

## 自定义hook

- `useBreadcrumb`    
设置面包屑，通常用于详情页

- `usePageLoading`    
设置页面的 `loading`，通常用于详情页
  
- `useLayoutLoading`   
设置整个布局的 `loading`，通常用于登陆成功后跳转时的过场

## 开发约定

- 拥抱 `React Hooks`
- `model` 使用 `hooks` 写法

## 优化打包文件

将 `react` 库通过 `cdn` 引入，减少包大小，配置如下，如果存在其他较大的第三方库，也可以通过做如下配置

```
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
  scripts: [
    'https://unpkg.com/react@16.12.0/umd/react.production.min.js',
    'https://unpkg.com/react-dom@16.12.0/umd/react-dom.production.min.js',
  ],
```

## 对接腾讯云静态网站托管

[参考文档](https://cloud.tencent.com/document/product/876/40270)

### 优点

- 不需要自己的服务器，支持 `cdn`，每月有 `5GB` 免费流量额度
- 部署简单，官方提供了 `cli`，通过命令一键部署

### 如何在该项目中使用

[参考文档](https://cloud.tencent.com/document/product/876/41539)

1. 安装 `CLI`

```bash
yarn global add @cloudbase/cli
```

2. 登录腾讯云 `CLI`

``` bash
tcb login
```

3. 打开 [`package.json`](./package.json) ，修改 `upload` 命令中的 `cloudPath` 和 `envId`

```
"upload": "tcb hosting deploy ./dist cloudPath -e envId",
```

4. 部署到静态网站托管

``` bash
$ yarn deploy
```