Install Vue cli3 globally and continue using Vue cli2.x operations

Official link: https://cli.vuejs.org/zh/guide/installation.html

1. Install Vue cli3

About the old version

The package name of Vue CLI has been changed from vue-cli to @ vue/cli. If you have installed the old version of vue-cli globally (1. x or 2. x), you need to uninstall it through npm uninstall vue-cli-g or yarn global remove vue-cli first.

Node Version Requirements

Vue CLI requires Node. js 8.9 or later (8.11. 0 + is recommended). You can use nvm or nvm-windows to manage multiple Node versions on the same computer.

You can install this new package using any of the following 1 commands:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

After installation, you can access vue commands from the command line. You can verify that vue has been installed successfully by simply running it to see if it shows a copy of help information for all available commands.

You can also use this command to check whether the version is correct (3. x):

vue --version

2. After installing Vue cli3, you still want to use vue-cli2.x

Vue CLI 3 and older versions use the same vue command, so Vue CLI 2 (vue-cli) is overwritten. If you still need to use the old version of vue init functionality, you can install a bridging tool globally:

npm install -g @vue/cli-init
//You can also use the vue init command after installation
vue init webpack my_project

Additional knowledge: vue of Vue-router router. beforeEach navigation guard, caught in an infinite loop

Official document: https://router.vuejs.org/zh/advanced/navigation-guards.html

Determine whether the browser cache has user information, and if not, jump to the login page.

After reading the official document, I wrote it directly. (I tried to clear the cache manually, and then skipped the login page from url, directly falling into an infinite loop)

router.beforeEach((to,from,next)=>{
 if(sessionStorage.getItem('loginData')){
  Toast(' Successful jump ');
  next();
 }else {
  // No login, go to the login page 
  next({
   path:'/login'
  });
 }
});

The reason is that next ('/login') specifies its own path, and the beforeEach navigation hook is executed once when the route jumps, so there is an infinite loop on it;

Add another judgment and it will be OK

router.beforeEach((to,from,next)=>{
 // console.log(to);
 // console.log(from);
 if(sessionStorage.getItem('loginData')){
  Toast(' Successful jump ');
  next();
 }else {
  // No login, go to the login page 
  if(to.path === '/login'){
   next();
  }else {
   next({
    path:'/login'
   });
  }
 }
});