全局安装 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 相关文章推荐
页面载入结束自动调用js函数示例
Sep 23 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
jQuery链使用指南
Jan 20 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 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
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
javascript操作css属性
2013/12/30 Javascript
js中this用法实例详解
2015/05/05 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
python cookielib 登录人人网的实现代码
2012/12/19 Python
在Python的循环体中使用else语句的方法
2015/03/30 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
政治学求职信
2014/06/03 职场文书
分公司负责人任命书
2014/06/04 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
考试作弊检讨书
2015/01/27 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python