Vite + TypeScript + Ant Design Vue 搭建后台管理系统（5.1）
介绍了vue3项目中npm包整体升级的实践和踩坑过程，可以使用npm-check或者npm-check-updates获取新版本号，然后进行对应升级
vue 更新的真的是太快了，没多久就已经从 3.1 升级到 3.2 了。
本来想写 breadcrumb 面包屑功能的，但是 3.2 版本的 script setup 和 css 中的 v-bind 真的感觉挺好的，也挺感兴趣的，还是得尝试一下，最终决定升级一下咯。
当然升级也不能光升级 vue，其他的库组件也需要处理一下
npm-check 版本升级
npm-check插件可以检测版本并进行升级
// 安装依赖包 npm install -g npm-check // 运行命令，查看包更新情况 npm-check -u // 更新全部命令 npm-check -y 复制代码
检测包更新效果：
问题 1：运行npm-check -y命令升级报错，提示ERESOLVE unable to resolve dependency tree，如下图所示：
(1)解决办法：先手动删除旧的 node modules and package-lock.json，然后执行npm cache clean --force，最后再运行安装命令。尝试后失败了，还是不行
(2)报错建议解决方法：实践后要使用命令一个个安装，太慢了
Fix the upstream dependency conflict, or retry(修复上游依赖冲突，或者重试)
this command with --force, or --legacy-peer-deps(使用 --force 或 --legacy-peer-deps)
to accept an incorrect (and potentially broken) dependency resolution(接受不正确（并且可能已损坏）的依赖项解析)
--force 强制拉取当前安装包的最新版本,不管本地已存在的副本
--legacy-peer-deps npm 采用安全的策略去处理各个依赖包中的不同版本
(3) 按照npm-check -u命令展示的包更新版本，直接改 package.json 版本号，然后 npm install 命令安装，这个感觉最快了
// 更新前 "dependencies": { "@ant-design/icons-vue": "^6.0.1", "ant-design-vue": "^2.2.2", "ramda": "^0.27.1", "vue": "^3.0.5", "vue-router": "^4.0.10", "vuex": "^4.0.2" }, "devDependencies": { "@types/node": "^16.4.1", "@types/ramda": "^0.27.44", "@vitejs/plugin-vue": "^1.2.5", "@vue/compiler-sfc": "^3.0.5", "less": "^4.1.1", "sass": "^1.35.2", "sass-loader": "^12.1.0", "typescript": "^4.3.2", "vite": "^2.4.3", "vite-plugin-imp": "^2.0.7", "vue-tsc": "^0.0.24" } // 更新后 "dependencies": { "@ant-design/icons-vue": "^6.0.1", "ant-design-vue": "^2.2.8", // 1 "ramda": "^0.27.1", "vue": "^3.2.21", // 1 "vue-router": "^4.0.12", // 1 "vuex": "^4.0.2" }, "devDependencies": { "@types/node": "^16.11.6", // 1 "@types/ramda": "^0.27.46", // 1 "@vitejs/plugin-vue": "^1.9.4", // 1 "@vue/compiler-sfc": "^3.2.21", // 1 "less": "^4.1.2", // 1 "sass": "^1.43.4", // 1 "sass-loader": "^12.3.0", // 1 "typescript": "^4.4.4", // 1 "vite": "^2.6.13", // 1 "vite-plugin-imp": "^2.0.10", // 1 "vue-tsc": "^0.28.10" // 1 } 复制代码参考文档：
vue 项目升级：vue 项目中的旧版本 npm 包怎么持续升级维护
npm-check官方地址
npm install xxxx --legacy-peer-deps 到底做了些什么？
npm-check-updates 版本升级
// 安装命令 npm install -g npm-check-updates // 运行命令：检测并更新 ncu -u // 更新后 "dependencies": { "@ant-design/icons-vue": "^6.0.1", "ant-design-vue": "^2.2.8", // 1 "ramda": "^0.27.1", "vue": "^3.2.21", // 1 "vue-router": "^4.0.12", // 1 "vuex": "^4.0.2" }, "devDependencies": { "@types/node": "^16.11.6", // 1 2 "@types/ramda": "^0.27.46", // 1 2 "@vitejs/plugin-vue": "^1.9.4", // 1 2 "@vue/compiler-sfc": "^3.2.21", // 1 2 "less": "^4.1.2", // 1 2 "sass": "^1.43.4", // 1 2 "sass-loader": "^12.3.0", // 1 2 "typescript": "^4.4.4", // 1 2 "vite": "^2.6.13", // 1 2 "vite-plugin-imp": "^2.0.10", // 1 2 "vue-tsc": "^0.28.10" // 1 2 } // 运行命令完成升级 npm install 或 npm update 复制代码直接运行
npm update效果，package 是没有变化的
运行
ncu -u命令，效果如下所示：只更新了devDependencies中的依赖包，dependencies中的没有变化
运行
npm outdated命令，查看剩下需要升级的包
最终还是手动更改 package，然后安装才行
参考文档：
[译] 如何更新 package.json 中的依赖项
npm-check-updates Github地址
升级结果
最终实现就是通过更改 package.json文件中的依赖版本号，然后运行npm update来实现升级的，升级之后项目可以正常运行。
当然也有可能是目前功能比较简单，因此升级影响不是特别大吧，暂时没啥报错的。真正实践项目还是以稳定为主的，不能随意升级
作者：时光足迹
链接：https://juejin.cn/post/7027024530400903204