回顾
写到这里，我们要开始一个React前端项目。
前置条件
- 熟悉 React 框架以及相关技术栈，比如 React Router、Redux 等。
- 熟悉 ES6+ 语法和常见的前端工具链，如 Webpack、Babel 等。
- 了解 TypeScript，因为 Umi 默认使用 TypeScript 作为开发语言。
- 熟悉 Node.js 和 npm，因为 Umi 是基于 Node.js 运行的。
- 了解基本的前端工程化和项目开发流程，包括代码管理、构建、调试和发布等。
开始umi
- 打开 WebStorm/VSCode，新建一个 "Project"命名为“abandon-web”；
- 在项目中，打开终端并运行以下命令来安装 Umi：
npm install umi -g
- 安装完成后，使用以下命令初始化 Umi 项目：
yarn create umi
- 在初始化 Umi 项目时，您需要选择您要使用的模板。模板介绍：
- "Simple App" 模板是 React 官方提供的一种非常基础的模板，适合用于快速创建简单的 React 应用程序，没有任何其他的依赖库，开发者需要自行添加需要的库和组件。
- "Ant Design Pro" 模板是一个基于 React 和 Ant Design 的企业级应用程序模板，适合用于快速创建复杂的应用程序，该模板已经集成了很多常用的库和组件，如 React Router、Redux、Ant Design 等，而且还提供了很多功能，如国际化、权限控制等。
- "Vue Simple App" 模板是 Vue 官方提供的一种非常基础的模板，适合用于快速创建简单的 Vue 应用程序，没有任何其他的依赖库，开发者需要自行添加需要的库和组件。
- "Umi Plugin" 模板则是使用 UmiJS 框架提供的一种非常灵活的模板，可以根据项目的需要选择使用不同的插件，例如 UmiJS 提供的路由插件、状态管理插件等，以及其他社区提供的插件，例如 dva、antd 等。
您可以选择 "Simple App"、"Ant Design Pro" 或 "Vue Simple App" 或"Umi Plugin"模板。我在这里使用的是"Ant Design Pro"。选择您想要的模板后，按照提示输入项目名称和其他信息，然后等待初始化完成；
- 依次按照自己本地配置选择，我选择的是：
- 初始化完成后，您可以在 WebStorm/VSCode 中打开您的 Umi 项目，并在终端中运行以下命令启动项目：
npm start
- 启动完成后，您可以在浏览器中访问 http://localhost:8000 来查看您的 Umi 项目。
验证
访问链接后，出现初始化后的umi项目窗口，即可成功！
写在后面
umi的项目目录结构如下：
.
├── dist/ // 默认的 build 输出目录
├── mock/ // mock 文件所在目录，基于 express
├── config/
├── config.js // umi 配置，同 .umirc.js，二选一
└── src/ // 源码目录，可选
├── layouts/index.js // 全局布局
├── pages/ // 页面目录，里面的文件即路由
├── .umi/ // dev 临时目录，需添加到 .gitignore
├── .umi-production/ // build 临时目录，会自动删除
├── document.ejs // HTML 模板
├── 404.js // 404 页面
├── page1.js // 页面 1，任意命名，导出 react 组件
├── page1.test.js // 用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
└── page2.js // 页面 2，任意命名
├── global.css // 约定的全局样式文件，自动引入，也可以用 global.less
├── global.js // 可以在这里加入 polyfill
├── app.js // 运行时配置文件
├── .umirc.js // umi 配置，同 config/config.js，二选一
├── .env // 环境变量
└── package.json
