写在最前

由于内容众多，此文档可仅当做是一个目录文档，具体详细的步骤，按配置内容的不同，分成了不同的文档。
最后更新时间节点：2022.04.05

技术选型

基于 react 技术栈，以 umi 应用框架为核心，使用 typescript 语言约束开发。

应用框架："umi": "^3.5.20"
开发语言："react": "17.x"
UI 框架：antd（当前Umi版本内置的antd，暂时这样使用，如果想使用特定版本的antd版本库，直接安装覆盖即可）
日期时间处理库："dayjs": "^1.10.7"（有时候，antd组件与dayjs可能会存在不兼容的情况，遇到了再说）
代码约束："typescript": "^4.1.2"
代码规范：Eslint + Stylelint
数据 mock："mockjs": "^1.1.0"
数据管理：dva （当前Umi版本内置的 dva）
权限管理（包括路由）：plugin-access （也是当前 Umi 版本内置的）
布局方式：ProLayout
样式：less
......

环境准备

node: >=16.0.0

IDE：我的是 vs code，需安装 ESLint、Prettier、StyleLint 等插件来配合开发，其它 IDE 我不确定代码校验是咋样的

附：

可使用 nvm 对不同版本的 node 进行管理，详细可参考：

使用 nvm 管理多版本 node（Mac环境）

项目结构

/*
 * @Description: 项目结构
 * @Author: kivet
 * @Date: 2022-01-25 15:55:00
 * @LastEditTime: 2022-01-26 10:33:57
 */
 
umi-demo-project
├─ config
│  ├─ config.dev.ts              # 测试环境项目配置
│  ├─ config.local.ts            # 本地环境项目配置
│  ├─ config.prod.ts             # 正式环境项目配置
│  ├─ config.ts                  # 项目的公共配置
│  ├─ routes.config.ts           # 整合项目中所有路由配置文件
│  └─ theme.config.ts            # 配置主题样式
├─ mock                          # mock 文件目录
├─ src                           # 项目源码目录
│  ├─ access.ts                  # 项目权限配置文件
│  ├─ app.tsx                    # 项目运行时配置文件
│  ├─ global.less                # 全局样式文件
│  ├─ assets                     # 项目静态文件目录，存放一些如图片，本地模板文件等
│  │  └─ images
│  │     ├─ index.ts             # 图片导出文件
│  │     └─ logo.png
│  ├─ components                 # 公共组件目录
│  │  └─ index.ts
│  ├─ layouts                    # layout 相关页面及组件     
│  ├─ models                     # models 层文件目录
│  │  └─ global.ts
│  ├─ pages                      # 所有页面的代码写在此 pages 目录下
│  ├─ services                   # services 层文件目录
│  │  └─ global.ts
│  ├─ typings                    # 全局 TS 类型定义
│  │  └─ global.d.ts
│  └─ utils                      # 功能目录
│     ├─ enum.ts                 # 全局枚举文件
│     ├─ helper.ts               # 全局功能函数
│     ├─ request.ts              # 全局请求/响应拦截器文件
│     └─ storage.ts              # 封装的一个私有的缓存存储库文件
├─ package.json
├─ README.md
├─ tsconfig.json                 # ts 配置文件
├─ typings.d.ts                  # 全局类型声明文件
├─ .cz-config.js                 # commit 提交配置文件
├─ .prettierrc.js                # prettierrc 配置文件
├─ .eslintrc.js                  # eslint 配置文件
├─ .stylelintrc.js               # stylelint 配置文件
├─ .editorconfig
├─ .gitignore
├─ .prettierignore
├─ yarn-error.log
└─ yarn.lock

项目初始化

// ? 1. 新建项目目录
mkdir myapp && cd myapp

// ? 2. 初始化项目
yarn create @umijs/umi-app

// ? 3. 安装依赖
yarn

// ? 4. 运行项目
yarn start

注意：

如果报umi: command not found 之类的

可输入 umi -v 查看 umi 的版本号看看是否安装了 umi 了的，没有的话，可使用 yarn add global umi 进行安装

关联远程代码仓库

以 GitHub 为例

// ? 1. 在 github 上新建一个仓库

// ? 2. 回到项目下，初始化仓库
git init

// ? 3. 关联
git remote add origin git@github.com:kivet-h/react-umi-scaffold.git

// ? 4. 提交代码，如提交到 feature/v1.0.0 分支上

git checkout -b feature/v1.0.0

git add .
git commit -m 'feat: 初始化项目'
git push -u origin feature/v1.0.0