全局安裝 Vue cli3 和繼續(xù)使用 Vue-cli2.x操作

更新時間：2020年09月08日 14:49:47 作者：ShiYadong_

這篇文章主要介紹了全局安裝 Vue cli3 和繼續(xù)使用 Vue-cli2.x操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

官方鏈接：https://cli.vuejs.org/zh/guide/installation.html

1.安裝Vue cli3

關于舊版本

Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。如果你已經(jīng)全局安裝了舊版本的 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導航守衛(wèi)，陷入死循環(huán)

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

判斷瀏覽器緩存是否有用戶的信息，沒有的話跳轉(zhuǎn)登錄頁。

看了官方文檔，直接這樣寫了。（試了手動清除緩存，再從url里面跳登錄頁，直接陷入了死循環(huán)）

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

原因是由于 next('/login')是自己指定路徑的，路由跳轉(zhuǎn)的時候還執(zhí)行一遍beforeEach導航鉤子，所以上面出現(xiàn)死循環(huán)；

再加個判斷就OK了

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

以上這篇全局安裝 Vue cli3 和繼續(xù)使用 Vue-cli2.x操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: