React + UmiJS 项目脚手架搭建

4,340 阅读3分钟

写在最前

  • 由于内容众多,此文档可仅当做是一个目录文档,具体详细的步骤,按配置内容的不同,分成了不同的文档。
  • 最后更新时间节点: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

配置代码提交规范

《配置代码提交规范》

配置代码书写规范

《配置代码书写规范》

配置多环境

《配置多环境》

添加并配置 layout 布局

《添加并配置 layout 布局》

添加 iconfont

《添加 iconfont》

配置路由菜单

《配置路由菜单》

添加Mock

《添加 Mock》

mock 配置搞定了,下面就可以开始写请求来测试是否成功。

新增全局 API 请求/响应拦截器

《新增全局 API 请求/响应拦截器》

添加基于 dva 的数据请求流程

《添加基于 dva 的数据请求流程》

项目权限管理

《路由权限管理》

配置页面 favicon

《配置页面 favicon》

最后,留个这个 demo 项目的 github 仓库地址供做参考

github.com/kivet-h/rea…


[0] umi 官方文档