Umi 创建 React + TS 项目

一、全局安装 umi 脚手架

        按键盘 Win + R 输入cmd，进入控制台。输入 umi -V 检查是否已经安装 umi 脚手架：

        输入命令按照 umi脚手架： npm install -g umi  

        查看 umi 版本：

二、Umi 创建 React + TS 项目

1.创建文件存放目录：

2.创建项目：

        npm create umi     (默认最新版，也可以指定版本安装： npm create umi@版本号)

        这里我们默认使用最新的umi版本，如果未进行全局安装 umi，则新建umi项目时会提示为该项目安装 对应版本的 umi脚手架，输入 y 耐心等待 umi脚手架安装完成。

3.选择 UmiJS 模板， 不同的模版 在创建新项目时提供了不同的基础结构和功能：

        （1）Simple App:

        这是最基本的模板，提供了一个简单的 UmiJS 应用程序框架，适合于新手入门或者构建不复杂的小型项目。它包含了基本的项目结构和配置，能够快速开始编写 React 应用。

        （2）Ant Design Pro:

        这个模板集成了 Ant Design 组件库，并提供了一个更完整、更复杂的项目结构和预设配置。适合构建中大型应用，它包含了路由、状态管理、国际化、权限控制等常用功能的配置，帮助快速搭建企业级应用。

        （3）Vue Simple App:

        尽管 UmiJS 主要是为 React 设计的，但也提供了一个 Vue 的简单模板。它类似于 Simple App，但是使用了 Vue.js 框架而不是 React。

        （4）Umi Plugin:

        这个模板可以创建一个 UmiJS 的插件。Umi 插件可以扩展 UmiJS 的功能，添加额外的特性或定制化。

        这里我选择 Ant Design Pro 模版：

4.选择包管理工具 （官方推荐使用pnpm）

        由于我使用的是 npm ，所以我选择 npm，你可以根据自己的情况进行选择。

5.选择是否需要淘宝镜像

        下载相关的库速度会更快，这里我选择使用 taobao镜像源，不使用 npm默认镜像。这一步会自动安装依赖，同时安装成功后会自动执行 umi setup 做一些文件预处理等工作。

6.等待 umi 项目初始化完成：

7.项目创建完成：

        可以在我们刚才创建的 umi项目存放的文件目录中看到相应的文件内容：

8.启动项目：

        可以看到 umi已经基于 我们刚才选择的 模版结构帮我们引入并创建了一些界面基础结构：

        使用 vscode打开 package.json文件查看包信息，已经引入了 ant-design pro 和 ant-design 以及默认引入 typescript 语法支持。到此，umi创建 react+ts项目结束。