全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
作者:ShiYadong_ 时间:2024-05-28 15:59:34
官方链接: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'
});
}
}
});
来源:https://blog.csdn.net/u012302552/article/details/81703202
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Oracle批量查询、删除、更新使用BULK COLLECT提高效率
pyinstaller打包多个py文件和去除cmd黑框的方法
![](https://img.aspxhome.com/file/2023/9/80739_0s.jpg)
Go语言集成开发环境IDE详细安装教程
![](https://img.aspxhome.com/file/2023/5/134105_0s.jpg)
MySQL安装配置方法教程
Python操作MySQL简单实现方法
jsp中文显示问号问题解决方法
基于python+opencv调用电脑摄像头实现实时人脸眼睛以及微笑识别
![](https://img.aspxhome.com/file/2023/5/76865_0s.jpg)
Vue实现返回顶部按钮实例代码
Python利用逻辑回归分类实现模板
Python smtplib实现发送邮件功能
如何“看看”服务器上的那个文件还在不在?
如何用Response.Write调用代替内嵌表达式?
vue实现消息无缝滚动效果
IE6/7/8/9中Table/Select的innerHTML不能赋值的解决方法
![](https://img.aspxhome.com/file/2023/0/136740_0s.png)
Python 网络爬虫--关于简单的模拟登录实例讲解
![](https://img.aspxhome.com/file/2023/9/65509_0s.jpg)
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
不用script仅用css编写无限级弹出菜单
![](https://img.aspxhome.com/file/UploadPic/20084/24/css-menu_89s.gif)
Vue+Vux实现登录功能
![](https://img.aspxhome.com/file/2023/0/130100_0s.png)
Python中不同图表的数据可视化的实现
![](https://img.aspxhome.com/file/2023/8/107198_0s.png)