写在最前
- 由于内容众多,此文档可仅当做是一个目录文档,具体详细的步骤,按配置内容的不同,分成了不同的文档。
- 最后更新时间节点: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
进行管理,详细可参考:
项目结构
/*
* @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
配置代码提交规范
配置代码书写规范
配置多环境
添加并配置 layout 布局
添加 iconfont
配置路由菜单
添加Mock
mock 配置搞定了,下面就可以开始写请求来测试是否成功。
新增全局 API 请求/响应拦截器
添加基于 dva 的数据请求流程
项目权限管理
配置页面 favicon
最后,留个这个 demo 项目的 github 仓库地址供做参考
[0] umi 官方文档