网站集成支付宝教程优化网站性能监测

1：全局安装create-react-app

npm install -g create-react-app

2：切换到项目要创建的目录下

cd /d G:\vsCode_project\react

3：使用脚手架命令创建工程

create-react-app 项目名

项目名命名要遵循npm包命名规范：数字、小写字母、_

4：错误解决：

当执行3创建工程时，可能会出现下面的错误：

原因解析：

@testing-library/react@13.4.0 需要 react@^18.0.0，而你的项目中使用的是 react@19.0.0。

由于本地使用的npm镜像源是淘宝的，很多库都还没有及时更新适配react19导致的。

解决办法：

一：逐步解决法：

缺点：繁琐

优点：错误分析直观，易于深入了解错误原因。

（1）、先使用cd命令切换到创建的项目名的文件夹内。

（2）、打开工程名对应的文件夹test1，找到package.json文件打开。

把里面的 react 和 react-dom 由19版本改为18版本。

 

然后在终端里执行以下命令安装18版本。

npm install

（3）、在终端执行以下命令启动项目

npm start

（4）、浏览器中打开以下地址访问工程站点。

localhost:3000

如果站点运行时浏览器页面提示以下错误：

此时终端里也有了错误提示：

解决办法：

（5）、终端里执行以下命令安装该丢失的web-vitals模块。

npm install web-vitals

（6）、终端执行以下命令重新启动工程。

npm start

此时浏览器里的项目就正常启动了。

二：一步到位解决法：

缺点：无法一步一步了解错误信息。

优点：方便快捷。

（1）、进入创建工程的目录内，把node_modules文件夹和package-lock.json文件删除。

（2）、打开配置文件package.json，按照下面的依赖项进行配置。

"dependencies": {"cra-template": "1.2.0","react": "^18.0.0","react-dom": "^18.0.0","@testing-library/react": "^13.4.0","react-scripts": "5.0.1","web-vitals":"^2.1.4"}

（3）、终端切换到工程目录内，使用npm install命令安装依赖包。

（4）、使用以下命令启动工程。

npm start

（5）、复制 http://localhost:3000 在浏览器中打开。

项目启动成功。