1. 无法创建react项目
问题展示：Missing dependencies in package.json
PS D:\workspace_2022\react> cnpm install -g create-react-app
Downloading create-react-app to D:\Program11\nodedata\node_global\node_modules\create-react-app_tmp
Copying D:\Program11\nodedata\node_global\node_modules\create-react-app_tmp\.store\create-react-app@5.0.1\node_modules\create-react-app to D:\Program11\nodedata\node_global\node_modules\create-react-app
Installing create-react-app's dependencies to D:\Program11\nodedata\node_global\node_modules\create-react-app/node_modules
...
...
...
# create-react-app 版本
PS D:\workspace_2022\react> create-react-app -V
5.0.1
# npx create-react-app 创建react-test01项目
PS D:\workspace_2022\react> npx create-react-app react-test01
Creating a new React app in D:\workspace_2022\react\react-test01.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1417 packages, and changed 2 packages in 1m
233 packages are looking for funding
run `npm fund` for details
# 报错
Missing dependencies in package.json
删除C:\Users\ZP下的.npmrc文件和package.json, 可能主要是package.json的问题，没去核对
删除.npmrc文件之后可能要重新配置一下node_global，node_cache。
然后就可以了。困扰了好几天，可能是以前随便建项目在C:\Users\ZP留下了package.json文件
-
npm安装不能使用问题（如安装 vue-cli，webpack）等
1.输入npm config list查看所有的配置信息
2.检查镜像命令是否正常 npm config get registry
3.用npm info vue看看是不是能获取vue的信息
4.然后用npm install npm -g将npm更新到最新版本
5.我们再查看一下npm list -g 会发现全局目录不是空目录了
6.这时，默认的模块路径D:\Program11\nodedata\node_modules变为D:\Program11\nodedata\node_global\node_modules,这个时候运行npm install命令会报错，如运行npm install vue
7.这时候我们需要在环境变量的系统变量里添加NODE_PATH
8.这里运行还会发生错误项目无法安装，那么这事后我们就要找到图片中.npmrc对应的文件夹
位置
2. nodejs环境的配置
1.1 安装node.js和Yarn
Nodejs：https://nodejs.org/zh-cn/
Yarn： https://classic.yarnpkg.com/lang/en/
1.2 设置路径
下载nodejs后，在与nodejs文件夹同级目录下创建nodedata文件夹并创建node_global，node_cache这俩个文件。
很多人建议在nodejs文件夹下创建
node_global，node_cache，这可能会出现管理员权限才能安装的问题，需要修改nodejs文件夹权限。所以我选择不放在nodejs中
#查看npm全局模块的存放路径
npm get prefix
#查看npm缓存默认存放路径
npm get cache
# 设置存放路径
npm config set prefix "D:\Program11\nodedata\node_global"
npm config set cache "D:\Program11\nodedata\node_cache"
1.3 添加环境系统变量
在环境变量的 系统变量 PATH 中添加
# nodejs 和 npm的node_modules的路径
D:\Program11\nodejs\
D:\Program11\nodedata\node_global
1.4 NPM设置
# 检查版本
node -v
npm -v
# 设置淘宝镜像
#永久链接
npm config set registry=http://registry.npmmirror.com
#临时链接
npm config set --registry=http://registry.npmmirror.com
#还原默认源
npm config set registry=https://registry.npmjs.org
# cnpm
npm install -g cnpm --registry=http://registry.npmmirror.com
# 查看当前镜像源
npm config get registry
#查看npm的所有配置
npm config list
#查看当前npm的bin的位置
npm -g bin
#查看版本信息或者使用管理员运行
#如果使用管理员才能运行，需要修改文件夹权限
npm info @vue/cli
cnpm info @vue/cli
#更新npm
npm install npm -g
3. Yarn设置
新建 yarn_global和 yarn_cache两个文件
使用yarn global bin查看自己的bin路径，没有就创建
#安装yarn
# 默认安装在D:\Program11\nodejs\node_global\node_modules下，
#或者D:\Program11\nodedata\node_global\node_modules\yarn\bin
npm install -g yarn --registry=http://registry.npmmirror.com
# yarn下载包的默认目录
#或者C:\Users\ZP\AppData\Local\Yarn\Data\global\node_modules
# 全局安装目录配置
yarn config set global-folder "D:\Program11\nodedata\yarn_global"
# 全局缓存目录
yarn config set cache-folder "D:\Program11\nodedata\yarn_cache"
# 查看当前镜像源
yarn config get registry
# 修改为淘宝镜像源
yarn config set registry http://registry.npmmirror.com
#查看yarn的所有配置
yarn config list
#查看当前yarn的bin的位置
yarn global bin
#查看当前yarn的全局安装位置
yarn global dir
#查看版本信息
yarn info @vue/cli
添加环境变量
默认安装在D:\Program11\nodedata\yarn_global下，不能使用再添加
D:\Program11\nodedata\yarn_global\node_modules\yarn\bin
检查yarn
yarn global add @vue/cli
//检查vue是否被安装
vue -V
//版本应该在3以上
vue create my-project
//之后会提示一些信息，按照需要选择，
//我们选择使用第一条（默认）、vuex、router，取消掉语法检测（倒数那个选中的）
//完成之后，进入到创建的项目根目录下
cd my-project
//安装依赖包
//说明：yarn是yarn install的简写，可直接敲击yarn，功能和npm install一样
yarn
//最后运行项目
yarn run dev
然后发现
PS C:\Users\ZP\Desktop> vue -V
node:internal/modules/cjs/loader:1078
throw err;
^
Error: Cannot find module 'D:\Program11\nodedata\node_global\node_modules\@vue\cli\bin\vue.js'
配置好yarn的环境变量
把yarn global bin和yarn global dir的路径都加上
发现还是一样的提示，认真看提示是node_global的路径，说明是npm或者cnpm的，然后进入文件夹下，发现D:\Program11\nodedata\node_global, D:\Program11\nodedata\node_global\bin都有vue、@vue的文件，可能是使用npm下载留下的，删除，再试可以了
参考：
[1]. https://www.jianshu.com/p/1ffed330f7da
[2]. https://www.jianshu.com/p/9f11b367b900
