全局安装 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.position()方法获取不到值的安全替换方法
Mar 13 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
vue使用screenfull插件实现全屏功能
Sep 17 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
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
python中eval与int的区别浅析
2019/08/11 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
聊聊python中的异常嵌套
2020/09/01 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
Django中template for如何使用方法
2021/01/31 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
SQL语言面试题
2013/08/27 面试题
村官工作鉴定评语
2014/01/27 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
生产文员岗位职责
2014/04/05 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python