全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
官方链接：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操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
v-model是Vue中的一个重要语法糖,主要用于实现数据的双向绑定,它通过结合value属性和input事件,简化了代码并提高了开发效率,文中通过代码介绍的非常详解,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了通过图带你深入了解vue的响应式原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，2019-06-06
vue init webpack 建vue项目报错的解决方法
今天小编就为大家分享一篇vue init webpack 建vue项目报错的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在这篇博客中,我们将探讨 script setup 的含义、好处以及示例代码,帮助你更好地理解并在项目中合理运用这一特性,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
很多情况下程序中使用的打印都是用户无感知的,并且想要灵活的控制打印内容,往往需要借助打印机给我们提供的api再进行开发,这种开发方式非常繁琐,并且开发难度较大,本文给大家介绍了Electron实现静默打印小票的流程,感兴趣的朋友可以参考下2024-06-06
这篇文章主要介绍了vue项目webpack中配置src路径别名及使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了vue 项目页面卡死原因排查分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
路由守卫，简单理解来说就是，当用户要进行一些操作时，我需要用户的一些信息或数据或行为，我判断过后，才会同意用户进行操作，说到这里，我想大家心里都或多或少有点理解了吧2023-01-01
这篇文章主要为大家详细介绍了vue实现鼠标滑动展示tab栏切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论