vue-cli多版本共存

4,012 阅读2分钟

一般情况下,我们只全局安装某一版本的vue-cli,如果想安装另一个版本的,就必须卸载当前已安装版本。本文将介绍如何让多版本vue-cli共存,并且通过不同的node指令创建不同版本的项目。

1、新建两个文件夹,用于局部安装vue-cli2和vue-cli3

在这里插入图片描述
在这里插入图片描述

2、进入vue2文件夹局部安装vue-cli2.0

在这里插入图片描述
在这里插入图片描述

vue-cli2.0版本下载命令为npm install vue-cli或者npm install vue-cli@版本号,这里我指定了版本号,还有这里不要加-g,否则就会安装到全局位置

  • 检验

    下载完毕,会生成一个node_modules文件夹,进入该文件夹下的.bin文件夹--F:\Vue\vue2\node_modules\.bin

    在这里插入图片描述
    在这里插入图片描述

    可以看到该文件夹下存放的是cmd命令,因为是局部安装,所以在该目录下执行cmd命令vue -V,结果如下则说明安装成功
    在这里插入图片描述
    在这里插入图片描述

3、进入vue3文件夹局部安装vue-cli3.0

vue-cli3.0安装步骤与上面的2.0基本相同,唯一不同的就是下载安装命令为-`npm install @vue/cli

4、修改CMD命令名称

为了便于区分,我们修改两个版本的cmd命令的名称,分别为vue-cli2vue-cli3

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5、配置环境变量

在这里插入图片描述
在这里插入图片描述

过程请看上图,最后一步要操作两次,分别添加2.03.0cmd命令到环境变量,点浏览后,选择到.bin文件夹就可以了

6、使用

  • 使用vue-cli2.0创建项目---vue-cli2 init webpack

    在这里插入图片描述
    在这里插入图片描述
  • 使用vue-cli3.0创建项目---vue-cli3 create my-project

    在这里插入图片描述
    在这里插入图片描述

总结:该方法的思路就是局部安装两个版本的vue-cli,然后将其各自的.cmd文件改名,并将其添加到系统变量path中即可!本文仅以两个版本为例,因为2.x3.x变化比较大,理论上安装任意个版本都可以!

如果文章对你有帮助,可以关注我的个人微信公众号支持一下,谢谢!