一、初始化 Ant Design Pro 脚手架
1.新建一个项目文件夹,在该位置cmd,进入命令板
2.跟着官网敲 开始使用 - Ant Design Pro
npm i @ant-design/pro-cli -g
npx pro create myapp
3.选择版本 umi@3 ---> simple
4.查看文件夹内容
5.安装依赖
$ cd myapp && tyarn
// 或
$ cd myapp && npm install(我用的这个)
a.报错:fatal: not a git repository (or any of the parent directories): .git
b.解决方式:找到文件位置,执行git init
之后重新执行 npm install,最后几行结果如下:
大致意思:
Browserslist
警告:caniuse-lite
已过期,建议运行npx update-browserslist-db@latest
来更新。- 安全性漏洞警告:
npm audit
检测到65个漏洞,其中有17个中等级漏洞,39个高危漏洞和9个严重漏洞。 建议运行npm audit fix
命令来修复那些不需要注意的问题,或运行npm audit fix --force
来解决所有可能的问题,包括可能引入破坏性更改的问题。请注意,修复漏洞可能会导致依赖项版本变更,所以在使用--force
标志之前,请确保你已经备份了项目或了解可能产生的影响。存在一些问题需要手动审查并可能需要更改依赖项。
建议运行
npm audit
命令以获取更详细的漏洞信息,并根据提示进行手动审查,可能需要更新或更改一些依赖项以修复漏洞。
c.所以执行: npx update-browserslist-db@latest 和 npm audit fix(建议复制自己命令面板上的)
二、使用WebStorm打开
1.在终端执行yarn
2.安装Umi UI工具,执行yarn add @umijs/preset-ui -D
3.运行start
3.1.报错
ERROR in ./src/components/index.md
Module build failed (from ./node_modules/@umijs/preset-dumi/lib/loader/index.js):
Error: [BABEL] E:\develop_tools\java\用户中心\myapp\src\components\index.tsx: @babel/helper-compilation-targets: 'opera_mobile' is not a valid target
- Did you mean 'opera'? (While processing: "E:\\develop_tools\\java\\用户中心\\myapp\\node_modules\\@umijs\\babel-preset-umi\\app.js$0$0$39")
3.2.解决办法
4.再次运行start
三、 使用Umi UI工具,自动添加代码
1.点击右下角米饭的图标
2.添加分析页
3.报错: Error: write data discarded, use flow control to avoid losing data