全局安装 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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
浅析vue数据绑定
Jan 17 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 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+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Python2中的raw_input() 与 input()
2015/06/12 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
pandas实现选取特定索引的行
2018/04/20 Python
python监控文件并且发送告警邮件
2018/06/21 Python
Python单元和文档测试实例详解
2019/04/11 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
自我评价怎么写好呢?
2013/12/05 职场文书
化学教师教学反思
2014/01/17 职场文书
大学毕业感言200字
2014/03/09 职场文书
授权委托书格式范文
2014/08/02 职场文书
学前班语言教学计划
2015/01/20 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
详解python的内存分配机制
2021/05/10 Python
python操作xlsx格式文件并读取
2021/06/02 Python
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers