vue2 和 vue3 共存

news2024/9/25 6:24:25

1.共存的前置条件

1.1 之前全局安装的 vue2 或者 vue3 的脚手架进行卸载,使用 npm命令卸载vue2 npm uninstall vue-cli -g
再使用 vue -V 查看版本出现以下提示为卸载完成 vue3卸载要使用命令npm uninstall @vue/cli -g
1.2 安装cnpm

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org ,然后等待,没报错表示安装成功

2.共存的操作步骤

2.1 安装vue-cli脚手架

随便选择一个系统盘,新建一个存放vue版本的文件夹,分别对应vue2版本和vue3版本,文件名字可以自己随意填写但不要使用中文,如下图:
在这里插入图片描述

2.2 然后进入vue-cli2文件夹也就是vue2版本的文件夹

在这里插入图片描述
,再执行安装命令:cnpm install vue-cli@2.9.6 需注意这里一定不要加 -g 不然就变为了全局安装,如下图:
在这里插入图片描述

最后回车,执行结果如下图:
在这里插入图片描述

2.3 同理我们进入安装vue3版本的文件夹进行安装 使用命令 cnpm install @vue/cli 要注意不要加 -g ,使用vue3必须确保@vue-cli版本在4.5.0以上,因此我们默认安装最新版本即可

在这里插入图片描述

2.4 修改名称

说明:此目的是为了使用命令时区分是vue2还是vue3
找到node_modules文件夹下 .bin文件夹下的 vue 和vue.cmd 文件,分别改名为vue2和vue2.cmd,下面是改好的样子
在这里插入图片描述
vue3也是同上进行操作:
在这里插入图片描述

2.5 检验安装是否成功

分别进入 vue2和vue3的安装目录\node_modules.bin 路径下找到vue的命令脚本文件直接拖入cmd窗口,加上 -V,查看版本,如下图:
在这里插入图片描述

2.6 最后一步,配置环境变量,实现全局调用

(1)右键我的电脑(此电脑) ----> 属性 —> 高级系统配置 —> 环境变量
在这里插入图片描述
(2)新建环境变量,目的是把我们的vue2和vue3的命令添加进去
在这里插入图片描述
vue3同上,最终结果是:
在这里插入图片描述

(3)修改path变量
双击path出现左边弹框。点击新建,输入以%包裹的变量名,中间的变量名就是你新建的环境变量。头尾分别加上%,别搞错了。
在这里插入图片描述
在这里插入图片描述
完成以上步骤后重启电脑就可以了。重启之后我们测试是否成功,这里注意因为电脑中存在两个vue版本
所以我们是以局部下载vue-cli版本再在电脑中配置全局启动特定的vue版本的命令脚本,所以我们前面进行了更改名字的行为。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/430504.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

java面试题(SpringBoot)

SpringBoot 1.什么是SpringBoot?有什么优点? springboot是spring的子项目,是spring组件的一站式解决方案,简化了使用的难度,简省了配置 优点: 容易上手,提升开发效率内置web容器管理第三方工…

第六章 物理层

数据通信基础 数据通信基本概念 消息与信息;消息是信息的载体 消息:人类能够感知的描述信息:抽象概念,可以理解为消息中所包含的有意义的内容 通信:一点精确或近似地再生另一点的信息信号:传递信息的载体…

提高客户忠诚度的 5 种方法

提高客户忠诚度是成功经营企业的最重要因素之一。忠诚的客户也更有可能向他们的朋友和家人推荐您的业务,从而开辟更多的收入来源。所以您需要将您的战略重点放在建立作为企业主的客户忠诚度上。 提高客户忠诚度的 5种方法 1.优先考虑客户服务 作为企业应该积极主动…

工赋开发者社区 | MES/MOM数据采集系统需求分析和总体设计

随着社会市场需求的不断变化,传统生产车间内的数据采集技术无法跟上市场变化的需求,容易出现数据记录滞后、实时监控困难等问题,造成了车间的生产效率低、产品质量低。在全球信息化的时代背景下,企业内的信息化管理可有效促进经济…

企业管理系统CRM与ERP有何区别

随着企业不断发展壮大,越来越多的企业引进管理系统,助力自身生产管理。目前市面上比较火热的企业管理系统软件有OA、CRM和ERP系统,关于企业OA管理系统,前面我们已经给出了很多介绍。今天主要带大家了解一下企业管理系统CRM和ERP系…

一文弄懂Python中的 if __name__ == __main__

1. 引言 在Python相关代码中,我们经常会遇到如下代码段: # stuff if __name__ "__main__":# do stuff本文将尽可能使用简单的样例来解释这里发生了什么,以及需要使用if __name__"__main__"的情形。请注意,…

m3u8视频文件破解爬取教程(请尊重知识产权,切勿违法),该方法需要基础开发知识

// UserScript // name media-source-extract // namespace https://github.com/Momo707577045/media-source-extract // version 0.8.2 // description https://github.com/Momo707577045/media-source-extract 配套插件 // author Momo707577045 // i…

ACL综合实验

拓扑结构: 要求 1、PC1可以Telnet R1,但是不能pingR1 2、PC1可以ping R2,但是不能Telnet R2 3、PC2的所有要求与PC1相反 使用的设备:4台路由器、1台交换机 解决网络拓扑: 1、确定广播域的个数 2、分配网段 3、配置…

【2023 · CANN训练营第一季】:AscendCL应用开发深入讲解 基础知识介绍

昇腾(Ascend)CANN(Compute Architecture for Neural Networks)是华为推出的一款面向AI处理器的软件开发工具包,用于支持各种AI应用的开发和部署。它的深度神经网络应用开发流程可以分为以下几个主要步骤 AscendCL应用…

TS WIKI 个人知识库软件

TS WIKI 个人知识库软件(VER: 0.1) TS WIKI 目标是做一个可以本地化部署,小型的,适合个人或小型团队的知识管理软件。 T(iny) S(mall) WIKI 软件界面 TS WIKI 功能说明 1、简化的软件依赖和安装 依赖的软件最简化。软件只使用 SQLITE 数据库&#xf…

【Java闭关修炼】SpringMVC-HttpMeaasgeConverter

【Java闭关修炼】SpringMVC-HttpMeaasgeConverter概述RequestBodyRequestEntity使用原生servlet响应浏览器ResponseBody概述 浏览器发送到服务器,将请求报文转换为java对象 服务器响应浏览器,将java对象转换成响应报文 RequestBody 将请求体中的请求报…

Flink系列-6、Flink DataSet的Transformation

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 大数据系列文章目录 官方网址:https://flink.apache.org/ 学习资料:https://flink-learning.org.cn/ 目录Flink 算子Ma…

C生万物 | 火眼辨析指针数组与数组指针

本文我们来讲讲C语言中的易混淆的指针数组与数组指针✒ 文章目录 一、指针数组1、概念明细2、数组地址偏移量与指针偏移量3、指针变量与数组名的置换【✔】4、实例讲解① 指针数组存放地址② 指针数组存放数组 二、数组指针1、数组指针的定义2、&数组名VS数组名3、数组指针…

VL822- GEN2 10Gbps简述及运用(USB3.1 HUB芯片)

VL822是一颗USB3.1 GEN2(10Gbps)的HUB芯片,有三种封装分别是QFN88(10x10x0.85 mm);QFN76(9x9x0.85 mm );QFN56(7x7x0.85 mm)。这三种封装在USB数据协议上都是一样,但各个封装都有自己的实际应用特点。 VL8…

ODrive运放电路的分析和替代方案

SimpleFOC、ODrive和VESC教程链接汇总:请点击   一、电流采样范围的计算 这是一个典型的Lowside电流采样运放电路,下图: 实际运用中会增加阻容做滤波处理。(SP1-SN1)就是电流在R5采样电阻上产生的压降&#xff0c…

模型融合和预测结果融合

模型融合和预测结果融合 文章目录模型融合和预测结果融合1. 模型融合提升技术1. Bagging 方法和随机森林2. Boosting 方法2. 预测结果融合策略1. Voting2. 软投票代码示例:3. Averaging 和 Ranking4. Blending5. Stacking3. 其他提升方法1. 模型融合提升技术 模型融…

一个Java线程的线生(线生 vs 人生)

java线程的使用 1. Java多线程概述 下面我们看下Java的多线程 1.1 java天生就是多线程的 一个Java程序从main()方法开始执行,然后按照既定的代码逻辑执行,看似没有其他线程参与,但实际上Java程序天生就是多线程程序,因为执行main…

设计模式 -- 建造者模式

前言 月是一轮明镜,晶莹剔透,代表着一张白纸(啥也不懂) 央是一片海洋,海乃百川,代表着一块海绵(吸纳万物) 泽是一柄利剑,千锤百炼,代表着千百锤炼(输入输出) 月央泽,学习的一种过程,从白纸->吸收各种知识->不断输入输出变成自己的内容 希望大家一起坚持这个过程,也同…

WPF教程(四)--Dispatcher

一、Dispatcher介绍 微软在WPF引入了Dispatcher,那么这个Dispatcher的主要作用是什么呢? 不管是WinForm应用程序还是WPF应用程序,实际上都是一个进程,一个进程可以包含多个线程,其中有一个是主线程,其余的是…

Embodied AI 具身智能

大模型的时代的到来,现在的大模型的参数几乎是几何级数的上升。 谷歌和柏林工业大学的团队重磅推出了史上最大视觉语言模型——PaLM-E:An Embodied Multimodal Language Model。通才大模型PaLM-E,什么是通才模型,就是多任务统一学…