1. 程式人生 > 程式設計 >全域性安裝 Vue cli3 和 繼續使用 Vue-cli2.x操作

全域性安裝 Vue cli3 和 繼續使用 Vue-cli2.x操作

官方連結:https://cli.vuejs.org/zh/guide/installation.html

1.安裝Vue cli3

關於舊版本

Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經全域性安裝了舊版本的 vue-cli(1.x 或 2.x),你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 解除安裝它。

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一臺電腦中管理多個 Node 版本。

可以使用下列任一命令安裝這個新的包:

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

安裝之後,你就可以在命令列中訪問 vue 命令。你可以通過簡單執行 vue,看看是否展示出了一份所有可用命令的幫助資訊,來驗證它是否安裝成功。

你還可以用這個命令來檢查其版本是否正確 (3.x):

vue --version

2.安裝完Vue cli3 之後,還想用vue-cli2.x 版本

Vue CLI 3 和舊版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能,你可以全域性安裝一個橋接工具:

npm install -g @vue/cli-init
//安裝完後 就還可以使用 vue init 命令
vue init webpack my_project

補充知識:Vue 之vue-router router.beforeEach導航守衛,陷入死迴圈

官方文件 :https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

判斷瀏覽器快取是否有使用者的資訊,沒有的話跳轉登入頁。

看了官方文件,直接這樣寫了。(試了手動清除快取,再從url裡面跳登入頁,直接陷入了死迴圈)

router.beforeEach((to,from,next)=>{
 if(sessionStorage.getItem('loginData')){
  Toast('跳轉成功');
  next();
 }else {
  //沒有登入,去跳轉登入頁
  next({
   path:'/login'
  });
 }
});

原因是由於 next('/login')是自己指定路徑的,路由跳轉的時候還執行一遍beforeEach導航鉤子,所以上面出現死迴圈;

再加個判斷就OK了

router.beforeEach((to,next)=>{
 // console.log(to);
 // console.log(from);
 if(sessionStorage.getItem('loginData')){
  Toast('跳轉成功');
  next();
 }else {
  //沒有登入,去跳轉登入頁
  if(to.path === '/login'){
   next();
  }else {
   next({
    path:'/login'
   });
  }
 }
});

以上這篇全域性安裝 Vue cli3 和 繼續使用 Vue-cli2.x操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。