官方鏈接：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里面跳登錄頁，直接陷入了死循環）
|
1
2
3
4
5
6
7
8
9
10
11
|
router.beforeEach((to,from,next)=>{ if(sessionStorage.getItem('loginData')){ Toast('跳轉成功'); next(); }else { //沒有登錄，去跳轉登錄頁 next({ path:'/login' }); }}); |
原因是由于 next('/login')是自己指定路徑的，路由跳轉的時候還執行一遍beforeEach導航鉤子，所以上面出現死循環；
再加個判斷就OK了
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/u012302552/article/details/81703202
