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

官方链接：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.js8.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操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue CLI2升级至Vue CLI3的方法步骤

    Vue CLI2升级至Vue CLI3的方法步骤

    以下备忘升级至 Vue CLI 3.x 版本后,将项目目录改为新结构时所需做的一些改动. 1. 卸载与安装 npm uninstall vue-cli -g npm install -g @vue/cli 注:若要使用 Vue CLI 3,需将 Node 版本升级至 8.9 及以上. 当使用 nvm 管理 node 版本时,可以使用如下方式切换至需求的 Node 版本: # 安装 >= 8.9 的某个版本 nvm install 8.12.0 # 在当前 session 中使用该版本 nvm u

  • 一份超级详细的Vue-cli3.0使用教程【推荐】

    一份超级详细的Vue-cli3.0使用教程【推荐】

    主要内容: 零配置启动/打包一个 .vue 文件 详细的搭建过程 重点推荐:使用图形化界面创建/管理/运行项目 安装: 卸载旧版本: 如果你事先已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先卸载它: npm uninstall vue-cli -g Node版本要求: 3.x需要在 Node.js 8.9或更高版本(推荐8.11.0+),点击这里可以安装node 大多数人都安装过了node,使用下面的命令行 查询你的node版本 : node -v 如果你的版本不够,可

  • vue-cli3搭建项目的详细步骤

    中文文档 https://github.com/vuejs/vue-docs-zh-cn 在安装之前请装好nodeJs 安装vue cli3 1. 检测vue 的版本 vue -V (V大写) or vue --version 2. 安装@vue/cli npm install -g @vue/cli (ps: vue cli2的安装方法 npm install -g vue-cli ) 安装全局桥插件,能兼容使用vue cli2 npm install -g @vue/cli-init cmd

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

    官方链接: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.js8.9 或更高版本 (推荐

  • vue cli3 配置 stylus全局变量的使用方式

    目录 vue cli3配置stylus全局变量 vue cli3使用stylus全局变量 vue cli3配置stylus全局变量 首先在common.styl文件中写一些常用的css变量,方便全局使用,避免重复代码. 预想的是在main.js中引入common.styl文件,然后所有的.vue文件就都可以使用了.但是事与愿违,根本不起作用. 网络上有很多教程,但是都不起作用(找答案是个痛苦且漫长的过程),下面是总结的代码,基本开箱即用,希望能帮助到需要帮助的人. // vue.config.j

  • vue中npm包全局安装和局部安装过程

    全局安装是将npm包安装在你的node安装目录下的node_modules文件夹中.在windows和mac中,全局安装的默认路径是不同的.在mac中默认是安装到 /usr/locla/lib 中.在windows默认安装目录是 C:\Program Files\nodejs ,当然你也可以通过一下命令来查看全局安装路径. // 查看全局安装路径 npm root -g // 查看npm的基础设置 npm config ls // 查看安装目录路径 npm config get prefix 全

  • Vue cli3 库模式搭建组件库并发布到 npm的流程

    市面上目前已有各种各样的UI组件库,比如 Element 和 iView ,他们的强大毋庸置疑.但是我们面临的情况是需求越来越复杂,当它们不能再满足我们需求的时候,这个时候就有必要开发一套属于自己团队的组件库了. 所以本文的目的就是让读者能通过此文,小能做一个简单的插件供人使用,大能架构和维护一个组件库不在话下. 以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程. vColorPicker 插件 DEMO 一.技术栈 如何通过新版脚手架创建项目,这里就不提了

  • Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项,网上有很多方法法,这里不重复写了.直接上 Vue CLI3.0 配置步骤. 第一步:安装 jQuery. Bootstrap.popper.js依赖. 其中popper.js 用于在 Bootstrap 中显示弹窗.提示.下拉菜单,所以需要引入. npm insta

  • 解决vue cli3使用axios跨域问题

    解决vue cli3使用axios跨域问题

    目录 一.什么是跨域 1.跨域 2.同源策略 3.跨域问题怎么出现的 二.使用 axios 演示并解决跨域问题(vue-cli3.0) 1.项目创建.与 axios 的使用 2.跨域问题重现 3.解决跨域问题 一.什么是跨域 1.跨域 指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 2.同源策略 是指协议,域名,端口都要相同,其中有一个不同都会产生跨域,在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问. 3.跨域问题怎么出

  • Vue CLI3 如何支持less的方法示例

    本文介绍了Vue CLI3 如何支持less的方法示例,分享给大家,具体如下: 安装方式: npm install less less-loader --save 或者 cnpm install less less-loader --save 大家在编写 .vue 文件的 style 的时候多会选择采用预编译样式来加速开发效率 <style lang="less"> #app { font-family: 'Avenir', Helvetica, Arial, sans-s

  • Vue CLI3 开启gzip压缩文件的方式

    gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件: npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置: 压缩前后大小大致如下: 生成的压缩文件以.gz

  • vue cli3.0 引入eslint 结合vscode使用

    它的目标是提供一个插件化的javascript代码检测工具.官网地址 最近一个项目里,最开始使用 cli3.0 搭建的时候没有默认选用 eslint ,导致现在有的人使用其他编辑器,就会出现格式错乱的情况.所以引入 eslint 做代码检测 第一步 (安装) npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev 引入关于 eslint 的一些依赖 当你的 pac

  • Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网

    1.准备工作. 1.首先准备安装Vue及Vue-CLI $ npm install vue $ npm install -g @vue/cli 2.其次下载Tomcat tomcat.apache.org/index.html 任选一个版本,我测试用的是macOS,所以下载了第二个压缩包 ​ 下载到本地后,解压缩,并且将解压缩后的文件夹复制到以下路径下,其中电脑名称就是你的用户名称. /Users/{电脑名称}/Library ,并且重命名为ApacheTomcat,这里要提一下,在这个文件夹下

随机推荐