全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作
官方鏈接：https://cli.vuejs.org/zh/guide/installation.html
1.安裝Vue cli3
關(guān)于舊版本
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 命令。你可以通過簡單運(yùn)行 vue，看看是否展示出了一份所有可用命令的幫助信息，來驗(yàn)證它是否安裝成功。
你還可以用這個命令來檢查其版本是否正確 (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
補(bǔ)充知識：Vue 之vue-router router.beforeEach導(dǎo)航守衛(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導(dǎo)航鉤子，所以上面出現(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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue保存自動格式化換行，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
Vue3之路由的query參數(shù)和params參數(shù)用法
這篇文章主要介紹了Vue3之路由的query參數(shù)和params參數(shù)用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue中常用的rules校驗(yàn)規(guī)則的實(shí)現(xiàn)
在vue開發(fā)中,難免遇到各種表單校驗(yàn),本文主要介紹了Vue中常用的rules校驗(yàn)規(guī)則的實(shí)現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-10-10
在VSCode中添加好用的插件可以提高我們的開發(fā)效率,這些可以幫助我們格式化,擴(kuò)充性,執(zhí)行最佳實(shí)踐的代碼方式,自動完成一些瑣碎的事情,下面這篇文章主要給大家推薦介紹了關(guān)于Vue3開發(fā)必備的六個VSCode插件,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了在vue中使用setInterval的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue如何實(shí)現(xiàn)自定義步驟條問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
VUE項(xiàng)目運(yùn)行npm install報錯問題以及解決
在運(yùn)行Vue項(xiàng)目時遇到npm安裝錯誤可使用命令npminstall--legacy-peer-deps解決,若VsCode中無法運(yùn)行npm命令,則可能是IDE配置未生效,可嘗試重啟電腦或使用cmd命令行直接在項(xiàng)目目錄下運(yùn)行2024-10-10
Vue.js獲取手機(jī)系統(tǒng)型號、版本、瀏覽器類型的示例代碼
這篇文章主要介紹了vue js獲取手機(jī)系統(tǒng)型號、版本、瀏覽器類型的示例代碼，代碼簡單易懂，非常不錯具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
element el-tooltip動態(tài)顯示隱藏(有省略號顯示,沒有省略號不顯示)
本文主要介紹了element el-tooltip動態(tài)顯示隱藏,主要實(shí)現(xiàn)有省略號顯示,沒有省略號不顯示,具有一定的參考價值,感興趣的可以了解一下2023-09-09
vue3+element?plus中利用el-menu如何實(shí)現(xiàn)路由跳轉(zhuǎn)
這篇文章主要給大家介紹了關(guān)于vue3+element?plus中利用el-menu如何實(shí)現(xiàn)路由跳轉(zhuǎn)的相關(guān)資料,在Vue?Router中我們可以使用el-menu組件來實(shí)現(xiàn)菜單導(dǎo)航,通過點(diǎn)擊菜單項(xiàng)來跳轉(zhuǎn)到不同的路由頁面,需要的朋友可以參考下2023-12-12