实现 vue-cli2和vue-cli3同时并存

最新推荐文章于 2024-07-19 10:30:06 发布
最新推荐文章于 2024-07-19 10:30:06 发布
阅读量1.9k 收藏 13
点赞数 2
分类专栏： vue.js 文章标签： vue.js
原文链接：https://blog.csdn.net/Jioho_chen/article/details/90455778
版权 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jioho_chen/article/details/90455778

win下 vue-cli2 和 vue-cli3 并存，一起使用

开局一张图，内容慢慢编
在这里插入图片描述

文章目录

vue2和vue3命令，分别代表了vue-cli2 和 vue-cli3的运行环境，是可以同时在一台电脑并存，使用，而且最重要的是，不用安装在C盘！

如果你已经安装了一个vue的版本，那可以使用本文的方法，在追加一个版本

骚操作开始：

既然要安装2个vue版本，那肯定要想下载对应的2个版本先，我的电脑是没安装过vue的环境的，所以这里我就在F盘随便找个地方，安装vue2和vue3

安装vue-cli版本

安装vue-cli3的最新版本
注意不要加 -g 加了就是全局安装了
vue-cli3我是安装在了vue3文件夹下的
执行：

npm install @vue/cli

  
  

  
  
  • 1

在这里插入图片描述

安装vue-cli2.9.6版本
安装2也是同理，我分开了文件夹，在vue2下面

执行：

npm install vue-cli@2.9.6

  
  

  
  
  • 1

当然你们也可以指定自己想要的版本

在这里插入图片描述

检验安装是否成功

安装vue-cli后，会在当前目录下有一个 node_modules 的文件夹。这也就是局部安装vue所需要的模块的文件

那么怎么检验呢：

vue-cli3检验

在vue3的目录下执行：

./node_module/.bin/vue -v

  
  

  
  
  • 1

这里需要注意的是
不要用cmd。最起码。找个趁手的命令行工具。。

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

看到执行结果都OK。都显示了对应的版本号。到这里就说明 vue-cli2.x和vue-cli3.x 局部安装成功了

修改vue2和vue3的名称

接下来，找到安装vue的目录，然后找到 vue 和 vue.cmd 的位置。分别改名为 vue2 vue2.cmd 和 vue3 vue3.cmd
目录和对应的文件名不要搞错

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

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

配置环境变量

还差最后一步，就配置完了。
之前折腾了那么多 安装vue版本 - 修改文件名都是为了这一步

打开环境变量所在位置

右键我的电脑-属性-高级系统设置-环境变量
在这里插入图片描述

新建系统变量

对应的输入变量名和文件目录
这里的目录就是我们安装vue的目录，而且找到.bin文件夹就可以了。
vue2和vue3不要弄混了。看图好理解

在这里插入图片描述

在这里插入图片描述

最后修改Path变量

这一步才是最重要的
先找到Path的位置（这个不能新建，每台电脑都有的）、然后编辑

在这里插入图片描述

win10电脑下就直接在空白栏双击，然后填入刚才我们设置的变量名、注意有 %%包着的

在这里插入图片描述

如果不是win10的电脑
编辑Path的时候。可以移到路径的输入框的最后面
然后输入 ;%VUE_CLI2%;%VUE_CLI3%
【重点】 win10以下的电脑环境变量是以 ; 分开的，所以不要漏了

最后可关掉cmd一试或重启电脑就行了

修改环境变量后，要重启电脑才能生效(不一定，可关掉cmd一试)。

如果按照流程走。那最后输入 vue2 和 vue3 就能看到我开头的图的效果了。意味着你的电脑 vue2.x和vue3.x版本同时存在，并且可以全局调用了！

写在最后

  1. 几个重要的变量命分别是什么？

我们在前面修改的 文件名称分别为 vue2 vue3 其实就决定了最后我们全局的vue的名称。当然给你也可以改成其他，以你的文件名称为准！

  1. 设置环境变量的时候 VUE_CLI2 和 VUE_CLI3有什么讲究吗？

没有，其实就是给Path找到vue所在的文件路径而已

  1. 设置 VUE_CLI2 和 VUE_CLI3记得一定只是选到 .bin 目录即可。剩下的系统会自动去找到对应的文件名称的了
  • 已有的项目已经集成了vue-cli。这篇文章的教程只是安装vue-cli用来生成项目，项目生成后，就算电脑没有vue-cli环境一样可以跑起来的
被抹茶的小白
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-cli2与vue-cli3在一台电脑共存的实现方法
10-16
主要介绍了vue-cli2与vue-cli3在一台电脑共存的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-cli2与vue-cli3在一台电脑共存
risingfine的博客
03-22 386
1、新建两个文件夹，分别用于存放vue-cli2和vue-cli3 1.png 2、进入vue2文件夹下载安装vue-cli2.0 2.png vue-cli2.0版本下载命令为npm install vue-cli或者npm install vue-cli@版本号，这里我指定了版本号，还有这里不要加-g,否则就会安装到全局位置 检验 下载完毕，会生成一个node_modules文件夹，进入该文件夹下的.bin文件夹--F:\Vue\vue2\node_module...
Vue2与Vue3共存于一台电脑 保姆级教程
程序员柒的博客
02-06 8436
提示：以下是本篇文章正文内容，下面案例可供参考右键我的电脑(此电脑) ----> 属性 —> 高级系统配置 —> 环境变量win11系统win10新建环境变量，目的是把我们的vue2和vue3的命令添加进去同理，vue3也是如此修改path变量双击path出现左边弹框。点击新建，输入以%包裹的变量名，中间的变量名就是你新建的环境变量。头尾分别加上%，别搞错了。注意：win10电脑追加path是上面所述，不是win10的话，直接在path后面用分号隔开例如：;%VUE_CLI2%;
vue-cli和vue之间的复杂关系
weixin_46247163的博客
06-04 290
(1)vue-cli3之前，也就是vue-cli2只能利用命令初始化vue2.x的项目，(2)vue-cli3~vue-cli4.5之间时,可以利用初始化vue2.x的项目，不能初始化vue3.x，因为vue-cli脚手架版本4.5以上对应的才是vue3(3)vue-cli4.5以上时，可以利用初始化vue2.x或者也vue3.x的项目，两者都可以在初始化时，自行选择。
vue2.0和vue3.0在同一电脑上运行（超详细步骤）
aaa1111111q的博客
06-10 4829
由于现在公司项目都是vue2.0项目，个人又需要3.0来学习。所以需要在同一电脑安装两个版本的vue。1.在创建vue2.0和vue3.0两个文件夹,并且局部安装。 在vue2文件夹 执行命令 npm install vue-cli@2.x.x(版本根据自身来选择)， 在vue3文件夹执行命令 npm install @vue/cli 2.验证是否安装成功在两个文件夹中找到路径 \node_modules\.bin并且使用cmd打开并执行 会显示版本号即为安装成功3.修改vue2和
【vue】vue-cli脚手架安装和vue环境搭建
weixin_53950583的博客
04-16 1107
一，安装vue-cli 1，安装node环境 官方地址：https://nodejs.org/zh-cn/ 2，使用cmd安装全局安装webpack npm i webpack -g 3，全局安装vue-cli npm i vue-cli -g 查看安装版本号 vue -V 4，搭建项目环境 cd 到想要存放项目的文件夹 或者直接在文价夹打开cmd vue init webpack myblog（项目名，不要出现大写字母） 然后会弹出来一些选项 ? Project name myblog
vue/cli 和 vue 版本对应及安装
热门推荐
qq_41040196的博客
11-15 1万+
vue 和 vue cli 的版本对应和安装方法
vue中vue-cli2和vue-cli3安装和常识问题
飞翔༒之翼
03-12 595
1.vue-cli的安装 npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev git commit -m “更新代码” -n （这个是vscode提交不了的git上传） 安装插件就是：npm install vue-router --save-dev 2.vue中的一些...
vue-cli系列之vue-cli-service整体架构浅析
12-07
vue启动一个项目的时候，需要执行npm run serve，其中这个serve的内容就是vue-cli-service serve。可见，项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东（主要...
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
vue-cli-plugin-multiple-page 一个基于 vue-cli 捆绑多个页面的插件。 与vue-cli's pages配置不同，它是通过将多个页面分片到不同的 webpack 配置来处理的 用法 在你的 vue-cli 创建的项目中安装插件，如果没有请...
vue-cli-plugin-vite：与vue-cli一起使用Vite Today
03-04
我们有很多现有的vue-cli（3.x / 4.x）项目。 在生产中：基于webpack的vue-cli仍然是捆绑webapp的最佳实践（通过代码拆分，旧版浏览器的旧版构建）。 在开发中：即时启动服务器并通过闪电快速实现HMR很有趣。 ...
vue-cli-plugin-tailwind:Tailwind CSS的vue-cli插件
05-10
vue-cli-plugin-tailwind 一个将Tailwind CSS添加到您的vue-cli项目的插件。入门在您的vue-cli项目文件夹中，通过以下方式添加插件： vue add tailwind选择要生成的Tailwind配置： 无-不会创建一个配置文件。 如果...
已安装Vue2的电脑上与Vue3版本共存
weixin_44144773的博客
02-16 1218
vue2与vue3共存
同一台电脑 实现 vue-cli2和vue-cli3同时并存
Jioho的博客
05-23 1万+
win下 vue-cli2 和 vue-cli3 并存，一起使用 开局一张图，内容慢慢编！ 文章目录win下 vue-cli2 和 vue-cli3 并存，一起使用安装vue-cli版本检验安装是否成功修改vue2和vue3的名称配置环境变量打开环境变量所在位置新建系统变量最后修改Path变量最后。重启电脑就行了 vue2和vue3命令，分别代表了vue-cli2 和 vue-cli3的运行环...
vue-cli的使用和vue项目的创建及运行
Alive_m的博客
10-07 767
vue-cli的使用和vue项目的创建及运行
Vue2 环境下安装Vue3 ，同一台电脑同时安装vue2 和vue3
weixin_41346436的博客
12-16 1万+
目前大多数老的项目还是以vue2.0版本为主，在vue3的环境下vue2的项目又不能运行，因此Vue2 和Vue3两个版本同时存在显得尤为重要，本博客为转发博客，非常详细 博客1：https://blog.csdn.net/Jioho_chen/article/details/90455778 博客2：https://blog.csdn.net/lb1135909273/article/details/100132670
vue2+vue3共存
qq_33438449的博客
07-28 6391
vue2+vue3共存参考文档 vue2+node安装参考文档 ！！而我的情况是，已经安装vue2项目，再去安装vue3。vue2参考上面连接安装，并且配置了环境变量 当我需要使用vue3创建项目时，没有删除vue2的情况下，执行命令：npm install -g @vue/cli 执行命令：vue --version，输出的是vue2的版本号，因为全局变量配置vue2的缘故！！ npm install -g @vue/cli@4.5.9 是安装特定版本号的vue 百度查询，还有先删除版本 通过截图，会
Vue3+与Vue2共存
书山有路
05-04 8934
目前大多数新项目都会采用Vue3+进行开发，然而在公司还需要维护一些之前使用老旧版本Vue2开发的项目，此时则需要我们在电脑上安装vue2与vue3+了。 1、 先来说说npm安装命令的参数-g -g参数可以将js包进行全局安装，即安装到当前用户目录下 比如使用命令 npm install -g @vue/cli 即可以安装最新版本vue到用户目录下，使用where vue 可以查看全局vue所在...
使用Vue实现点击页面触发特效
最新发布
qq_45569925的博客
07-19 725
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
vue-cli2和vue-cli3的区别
06-28
### 回答1： vue-cli2和vue-cli3有一些重要的区别: 1.配置文件: vue-cli2使用的是`config/index.js`文件来配置项目,而vue-cli3使用的是`.env`和`.env.xxx`文件来配置项目. 2.构建工具: vue-cli2使用的是webpack1,而vue-cli3使用的是webpack4. 3.项目结构: vue-cli2项目结构比较简单,而vue-cli3提供了更加灵活的项目结构. 4.插件系统: vue-cli2使用的是全局插件,而vue-cli3使用的是局部插件. 5.使用方式: vue-cli2是全局安装,而vue-cli3是局部安装. ### 回答2： Vue-cli是一个vue.js的官方脚手架工具，它可以帮助我们更快地搭建一个基于Vue的项目。Vue-cli2和Vue-cli3是Vue-cli的不同版本，在一些方面存在一些显著的差异。 1. 项目结构： Vue-cli2生成的项目结构中，代码和配置信息都放在同一个文件夹中，每一个功能模块都需要手动创建；而Vue-cli3采用了新的配置方案，将项目的配置信息单独抽离出来，并且在工具创建项目时自动生成了更完整的项目结构，使项目结构更加清晰和易于管理。 2. 配置方式： Vue-cli2是通过修改webpack.config.js文件来进行项目配置的，而Vue-cli3则是通过创建vue.config.js文件来进行项目配置的。在Vue-cli3中，我们可以直接在vue.config.js中添加一些特定的配置，而无需修改webpack.config.js文件。这样做更加方便，也更加容易管理项目的开发和部署。 3. 优化： 在Vue-cli3中，作者对项目进行了一些自动优化的处理，例如：自动抽取第三方库等，以优化打包和运行速度。而Vue-cli2则需要手动配置优化选项。 总之，Vue-cli3相比Vue-cli2在工程化方面有了更多的改进和优化，我们将会更加方便、快捷地构建一个基于Vue的项目。 ### 回答3： Vue是一个流行的JavaScript框架，它允许开发人员构建动态Web应用程序。而Vue CLI是Vue的脚手架工具，用于快速构建Vue项目。Vue CLI 2和Vue CLI 3是Vue CLI的不同版本，下面将介绍它们之间的不同： 1.项目结构：Vue CLI 2生成的项目结构是采用传统的单一的Webpack配置文件，而Vue CLI 3则是基于插件的灵活的配置，将Webpack配置拆分为多个小的配置文件。 2.依赖：Vue CLI 2使用的是Vue Router 2，而Vue CLI 3升级到了Vue Router 3，同时也使用了全新的Vuex。 3.插件化: Vue CLI 3采用了插件化的概念，每个插件都可以为开发者提供定制的Webpack配置和功能增强。 4.内置功能：Vue CLI 3集成了一些内置功能如：PWA支持、自动生成样式和文档等。 5.提高性能：Vue CLI 3对webpack的配置进行了深度优化，提供了更优秀的性能表现，同时还加入了预编译，tree shaking 外置化了 `webpack`,对项目编译速度支持了更大的提升。 总的来说，Vue CLI 3采用了更先进的技术、更简单的配置结构、更多的内置功能和更好的性能。如果你计划开始一个新的Vue项目，强烈建议使用Vue CLI 3，以提高代码的开发效率和性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值