溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
官方鏈接：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,from,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操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
