全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作
官方鏈接：https://cli.vuejs.org/zh/guide/installation.html
1.安裝Vue cli3
關(guān)于舊版本
Vue CLI 的包名稱(chēng)由 vue-cli 改成了 @vue/cli。 如果你已經(jīng)全局安裝了舊版本的 vue-cli(1.x 或 2.x)，你需要先通過(guò) npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一臺(tái)電腦中管理多個(gè) Node 版本。
可以使用下列任一命令安裝這個(gè)新的包：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安裝之后，你就可以在命令行中訪問(wèn) vue 命令。你可以通過(guò)簡(jiǎn)單運(yùn)行 vue，看看是否展示出了一份所有可用命令的幫助信息，來(lái)驗(yàn)證它是否安裝成功。
你還可以用這個(gè)命令來(lái)檢查其版本是否正確 (3.x)：
vue --version
2.安裝完Vue cli3 之后，還想用vue-cli2.x 版本
Vue CLI 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能，你可以全局安裝一個(gè)橋接工具：
npm install -g @vue/cli-init
//安裝完后 就還可以使用 vue init 命令
vue init webpack my_project
補(bǔ)充知識(shí)：Vue 之vue-router router.beforeEach導(dǎo)航守衛(wèi)，陷入死循環(huán)
官方文檔 :https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
判斷瀏覽器緩存是否有用戶(hù)的信息，沒(méi)有的話(huà)跳轉(zhuǎn)登錄頁(yè)。
看了官方文檔，直接這樣寫(xiě)了。（試了手動(dòng)清除緩存，再?gòu)膗rl里面跳登錄頁(yè)，直接陷入了死循環(huán)）
router.beforeEach((to,from,next)=>{
if(sessionStorage.getItem('loginData')){
Toast('跳轉(zhuǎn)成功');
next();
}else {
//沒(méi)有登錄，去跳轉(zhuǎn)登錄頁(yè)
next({
path:'/login'
});
}
});
原因是由于 next('/login')是自己指定路徑的，路由跳轉(zhuǎn)的時(shí)候還執(zhí)行一遍beforeEach導(dǎo)航鉤子，所以上面出現(xiàn)死循環(huán)；
再加個(gè)判斷就OK了
router.beforeEach((to,from,next)=>{
// console.log(to);
// console.log(from);
if(sessionStorage.getItem('loginData')){
Toast('跳轉(zhuǎn)成功');
next();
}else {
//沒(méi)有登錄，去跳轉(zhuǎn)登錄頁(yè)
if(to.path === '/login'){
next();
}else {
next({
path:'/login'
});
}
}
});
以上這篇全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
v-model是Vue中的一個(gè)重要語(yǔ)法糖,主要用于實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,它通過(guò)結(jié)合value屬性和input事件,簡(jiǎn)化了代碼并提高了開(kāi)發(fā)效率,文中通過(guò)代碼介紹的非常詳解,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了通過(guò)圖帶你深入了解vue的響應(yīng)式原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，2019-06-06
vue init webpack 建vue項(xiàng)目報(bào)錯(cuò)的解決方法
今天小編就為大家分享一篇vue init webpack 建vue項(xiàng)目報(bào)錯(cuò)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue3中的script?setup語(yǔ)法糖的使用及說(shuō)明
在這篇博客中,我們將探討?script?setup?的含義、好處以及示例代碼,幫助你更好地理解并在項(xiàng)目中合理運(yùn)用這一特性,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
Electron實(shí)現(xiàn)靜默打印小票的流程詳解
很多情況下程序中使用的打印都是用戶(hù)無(wú)感知的,并且想要靈活的控制打印內(nèi)容,往往需要借助打印機(jī)給我們提供的api再進(jìn)行開(kāi)發(fā),這種開(kāi)發(fā)方式非常繁瑣,并且開(kāi)發(fā)難度較大,本文給大家介紹了Electron實(shí)現(xiàn)靜默打印小票的流程,感興趣的朋友可以參考下2024-06-06
vue項(xiàng)目webpack中配置src路徑別名及使用方式
這篇文章主要介紹了vue項(xiàng)目webpack中配置src路徑別名及使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Vue.js的指令是以v-開(kāi)頭的，它們作用于HTML元素，指令提供了一些特殊的特性。這篇文章主要介紹了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相關(guān)知識(shí),需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue?項(xiàng)目頁(yè)面卡死原因排查分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
路由守衛(wèi)，簡(jiǎn)單理解來(lái)說(shuō)就是，當(dāng)用戶(hù)要進(jìn)行一些操作時(shí)，我需要用戶(hù)的一些信息或數(shù)據(jù)或行為，我判斷過(guò)后，才會(huì)同意用戶(hù)進(jìn)行操作，說(shuō)到這里，我想大家心里都或多或少有點(diǎn)理解了吧2023-01-01
vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)展示tab欄切換
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)展示tab欄切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04