“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

This section describes how to upgrade the NPM package in the VUE3 project. You can use nPm-check or NPm-check-updates to obtain the new version number and then upgrade the NPM package

The vue update was really fast, it didn’t take long to upgrade from 3.1 to 3.2.

I wanted to write breadcrumb, but I was really interested in the 3.2 version of Script Setup and V-bind in CSS, so I had to give it a try and decided to upgrade.

Of course, you can’t just upgrade vUE, other library components need to be dealt with as well

Npm-check version upgrade

The NPM-check plug-in detects versions and upgrades

// Install dependency packages
npm install -g npm-check

// Run the command to view the package update
npm-check -u

// Update all commands
npm-check -y
Copy the code

Update effect of detection package:

Problem 1: Running the NPM -check -y command error upgrade, indicating ERESOLVE unable to resolve Dependency tree, as shown in the following figure:

(1) Solution: manually delete old node modules and package-lock.json, then run NPM cache clean –force, and then run install command. Try and fail, but it doesn’t work

(2) Error suggestion solution: after practice, use commands to install one by one, which is too slow

  • Fix the upstream dependency conflict, or retry
  • This command with –force, or –legacy-peer-deps(use –force or –legacy-peer-deps)
  • To Accept an Incorrect (and potentially broken) dependency Resolution

–force Forcibly pulls the latest version of the current installation package, regardless of the existing local copy

Legacy-peer-deps NPM uses a secure policy to handle different versions of dependent packages

(3) Use the NPM -check -u command to change the package.json version number directly, and then use the NPM install command to install the package

/ / before update
"dependencies": {
    "@ant-design/icons-vue": "^ the 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.4.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"
  }

/ / updated
"dependencies": {
    "@ant-design/icons-vue": "^ the 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
  }
Copy the code

Reference Documents:

  • Vue project upgrade: how do old versions of NPM packages in VUE project continue to be upgraded and maintained
  • Npm-check Official address
  • NPM install XXXX –legacy-peer-deps does what?

Npm-check-updates Updates

// Install command
npm install -g npm-check-updates

// Run the command: check and update
ncu -u

/ / updated
"dependencies": {
    "@ant-design/icons-vue": "^ the 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
  }

// Run the following command to complete the upgradeNPM install or NPM updateCopy the code
  1. Run directlynpm updateThe effect, package, is unchanged

  1. runncu -uCommand, the effect is as follows: only updateddevDependenciesDependency packages in,dependenciesThere is no change in

  1. runnpm outdatedCommand to view the remaining packages that need to be upgraded

  1. Ultimately, change the package manually and then install it

Reference Documents:

  • How do I update dependencies in package.json
  • NPM – check – updates making address

The upgrade

The final implementation is achieved by changing the dependency version numbers in package.json files and then running NPM update, after which the project runs normally.

Of course, it is also possible that the current function is relatively simple, so the impact of the upgrade is not particularly big, there is no fault reported for the moment. Real practice projects are mainly stable, can not be upgraded at will