全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作


Posted in Javascript onSeptember 08, 2020

官方链接: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操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 学习入门篇附实例代码
Mar 16 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
简单分析js中的this的原理
Aug 31 Javascript
JS删除对象中某一属性案例详解
Sep 08 #Javascript
vue全局使用axios的操作
Sep 08 #Javascript
Vue自定义多选组件使用详解
Sep 08 #Javascript
vue项目中微信登录的实现操作
Sep 08 #Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 #Javascript
快速解决element的autofocus失效问题
Sep 08 #Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 #Javascript
You might like
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
js调用flash的效果代码
2008/04/26 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
Linux Centos7.2下安装nodejs&npm配置全局路径的教程
2018/05/15 NodeJs
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
python dict如何定义
2020/09/02 Python
python自动生成sql语句的脚本
2021/02/24 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
JSF的标签库有哪些
2012/04/27 面试题
关于运动会的稿件
2014/02/02 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
党员承诺书内容
2014/03/26 职场文书
村容村貌整治方案
2014/05/21 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
实验心得体会
2014/09/05 职场文书
车辆转让协议书
2014/09/24 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang