1.安装

全局安装 umi

npm install -g umi

推荐使用 yarn 代替 npm 来安装 umi ， yarn 会针对部分场景做一些缓存以节省时间，你可以输入以下命令来全局安装 yarn ：

npm i yarn -g

命令行执行结束后，判断 yarn 是否安装成功：

$ yarn -v
1.9.4

2.脚手架创建项目

首先，创建一个空目录

$ mkdir myapp && cd myapp

使用 @umijs/umi-app 为模板，创建一个项目：

E:\react-workspaces\myapp>yarn create @umijs/umi-app

报错：'D:\Program' 不是内部或外部命令，也不是可运行的程序

或批处理文件。

于是我找到“D:\Program Files\nodejs\node_global\bin\”目录下的 create-umi.cmd，内容如下：

@"%~dp0\C:\Users\PC\AppData\Local\Yarn\Data\global\node_modules.bin\create-umi.cmd"   %*

然后就大概猜到是什么问题了，就是这个路径的问题，在windows系统下，盘符前哪里还需要什么 '' 符号，所以果断将 C: 盘符前的符号删了，如下：

@"C:\Users\PC\AppData\Local\Yarn\Data\global\node_modules.bin\create-umi.cmd"   %*

然后再运行create-umi-app -v命令，就可以正常显示了，如果还不行的话，在环境变量的Path中添加create-umi-app所在的路径，"D:\Program\nodejs\node_modules\bin" ，加入之后，重新打开命令行，就可以解决问题了。

E:\react-workspaces\myapp>create-umi-app -v
@umijs/create-umi-app@3.5.41

E:\react-workspaces\myapp>create-umi-app

之后在创建umi项目时，千万不要运行 yarn create @umijs/umi-app，这样会重新安装create-umi-app，将会出现刚擦一样的情况，想要创建项目，只需要在项目路径下，运行“create-umi-app”即可

安装依赖

$ yarn
# 或npm install

3.启动项目

$ yarn start
# 或npm run start

问题描述：

    报错：Error: error:0308010C:digital envelope routines::unsupported

报错原因：
主要是因为 nodeJs V17 版本发布了 OpenSSL3.0 对算法和秘钥大小增加了更为严格的限制，nodeJs v17 之前版本没影响，但 V17 和之后版本会出现这个错误。 我的node版本是v18+
解决方案:
方案1：打开IDEA 终端，直接输入

Linux & Mac OS：

export NODE_OPTIONS=--openssl-legacy-provider

Windows：

set NODE_OPTIONS=--openssl-legacy-provider

方案2：打开IDEA 终端，直接输入（问题解决）

$env:NODE_OPTIONS="--openssl-legacy-provider"

方案3:卸载当前版本，安装合适的版本(node.js)

方案4:

解决方式（仅限 windows）:

在项目中 package.json 的 scripts 中新增 SET NODE_OPTIONS=--openssl-legacy-provider

添加前：

"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build"
},

添加后:

"scripts": {
"dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
},

本人是采用第四种方案解决的

路由分类

约定式路由

默认访问pages文件夹下的index.tsx

配置式路由

在umirc.ts中配置路由