vue项目下npm或yarn下安装echarts多个版本

        最近在大屏展示的时候,用到了百度的echarts图表库,看完效果图后,又浏览了一下echarts官网案例,大同小异。但是搬砖过程中发现实际效果和demo相差甚远,一番折腾发现,项目中安装的是echarts4.x版本,而这次需要用到的echarts5.x版本的。由于echarts关联的其他模块已经上线,echart图表稳步运行中,echarts4.x和echarts5.x 在引用方式也不相同,升级版本是不可能的,代价太大,当时在想一个项目是否可以安装多个版本的依赖包呢?事实情况是可以的。

        一个项目echarts安装多个版本,其实就是给不同版本的包起别名,这样就避免了在package.json文件中出现覆盖情况。

        npm 安装别名官网文档介绍

        别名    <alias>@npm:<name>

主要由 npm install 之类的命令和 package.json 的依赖部分使用,this 通过别名引用包。 <alias> 是在 node_modules 文件夹中具体化的包的名称,而 <name> 指的是在配置的注册表中找到的包名称。

Primarily used by commands like npm install and in the dependency sections in the package.json, this refers to a package by an alias. The <alias> is the name of the package as it is reified in the node_modules folder, and the <name> refers to a package name as found in the configured registry.

官网给的例子

Examples:

  • semver:@npm:@npmcli/semver-with-patch
  • semver:@npm:semver@7.2.2
  • semver:@npm:semver@legacy

在这里 semver: 就是别名了

如果你用的yarn 基本上是和npm是一样的

  yarn 安装别名官网文档介绍

yarn add <alias-package>@npm:<package>

这将在自定义别名下安装一个包。 别名允许安装同一依赖的多个版本,每个版本都通过给定的别名包名称进行引用。 例如,yarn add my-foo@npm:foo 将在你的 dependencies 中以指定的别名 my-foo 安装软件包 foo(最新版本)。 此外,yarn add my-foo@npm:foo@1.0.1 允许安装特定版本的 foo。

This will install a package under a custom alias. Aliasing, allows multiple versions of the same dependency to be installed, each referenced via the alias-package name given. For example, yarn add my-foo@npm:foo will install the package foo (at the latest version) in your dependencies under the specified alias my-foo. Also, yarn add my-foo@npm:foo@1.0.1 allows a specific version of foo to be installed.

以echarts为例,目前项目中已经安装了4.x并运行上线了

安装echarts5.4.3版本,我项目用的是yarn,所以控制台输入

yarn add echarts5@npm:echarts@5.4.3

安装成功后看到package.json 

echarts5.x版本引用方式

import * as echarts from 'echarts5';

当前安装echarts4.x和5.x两个版本,分别为两种命名,在引用时分别引用对应的别名即可。

其他:

一个vue组件中是否可以同时引用echarts4.x 和 echarts5.x 呢,特意试了一下,没有问题,可以同时展示两种。

找了个仪表盘的demo同时在一个组件中实现:

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

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

相关文章

二进制求和

这篇文章会收录到 : 算法通关村第十三关-白银挑战数字与数学高频问题-CSDN博客 二进制求和 描述 : 给你两个二进制字符串 a 和 b &#xff0c;以二进制字符串的形式返回它们的和。 题目 : LeetCode 67.二进制求和 : 67. 二进制求和 分析 : 这个题也是用字符串来表示数据的…

深入理解Zookeeper系列-1.初识Zoookeeper

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码、Kafka原理、分布式技术原理&#x1f525;如果感觉博主的文章还不错的话&#xff…

设计模式-创建型模式之原型、建造者设计模式

文章目录 七、原型模式八、建造者模式 七、原型模式 原型模式&#xff08;Prototype Pattern&#xff09;是用于创建重复的对象&#xff0c;同时又能保证性能。它提供了一种创建对象的最佳方式。 这种模式是实现了一个原型接口&#xff0c;该接口用于创建当前对象的克隆。当直…

Python实现FA萤火虫优化算法优化循环神经网络回归模型(LSTM回归算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 萤火虫算法&#xff08;Fire-fly algorithm&#xff0c;FA&#xff09;由剑桥大学Yang于2009年提出 , …

[操作系统] 文件管理

文章目录 5.1 磁盘调度算法1. 先来先服务算法( First Come First Served, FCFS) 算法2. 最短寻道时间优先算法( Shortest Seek Time First, SSTF) 算法3. 扫描算法( SCAN ) 算法4. 循环扫描算法( Circular Scan, CSCAN ) 算法5. LOOK 与 CLOOK 算法 5.2 进程写文件时&#xff0…

禁奥义·SQL秘籍

sql secret scripts sql 语法顺序、执行顺序、执行过程、要点解析、优化技巧。 1、语法顺序 如上图所示&#xff0c;为 sql 语法顺序与执行顺序对照图。其具体含义如下&#xff1a; 0、select&#xff1a; 用于从数据库中选取数据&#xff0c;即表示从数据库中查询到的数据的…

[架构之路-255]:目标系统 - 设计方法 - 软件工程 - 软件设计 - 架构设计 - 软件架构风格

目录 前言&#xff1a; 一、建筑风格 1.1 什么是建筑风格 1.2 常见的建筑风格 1.3 如何区分不同的建筑风格 二、软件架构风格概述 2.1 什么是软件架构风格 2.2 如何区分不同的软件架构风格 2.3 软件架构风格的发展阶段 2.4 软件架构风格与软件架构的区别 2.5 常见的…

数字图像处理(实践篇)十五 基于傅里叶变换的高通滤波和低通滤波

目录 一 Numpy 实现傅里叶变换 1 涉及的函数 2 实践 二 OpenCV 实现傅里叶变换 1 涉及的函数 2 实践 为了有效地和快速地对图像进行处理和分析&#xff0c;常常需要将原定义在图像空间的图像以某种形式转换&#xff08;正变换&#xff09;到另外一些空间&#xff0c;并利…

使用gparted进行ubuntu虚拟机的磁盘扩容(解决gparted无法拖动分区的问题)

在学习内核编译下载linux内核源码的时候&#xff0c;由于源码非常大&#xff0c;下载的时候提示磁盘空间不足&#xff0c;我才意识到刚开始创建虚拟机的时候分配了20GB的空间现在已经快用光了。在VM的设置里可以进行扩容&#xff0c;我扩展到了30GB重启却发现空间并没有加到我使…

数据库应用:MongoDB 文档与索引管理

目录 一、理论 1.MongoDB文档管理 2.MongoDB索引管理 二、实验 1.MongoDB文档管理 2.MongoDB索引管理&#xff08;索引添加与删除&#xff09; 3.MongoDB索引管理&#xff08;全文索引&#xff09; 4.MongoDB索引管理&#xff08;多列索引&#xff09; 5.MongoDB索引管…

虚拟数字人有什么用?有哪些应用场景?

​​过去三年&#xff0c;元宇宙概念进入到大众视野&#xff0c;虚拟数字人备受关注。抖音达人柳夜熙、洛天依、网红虚拟偶像AYAYI等&#xff0c;随着元宇宙的流行&#xff0c;数字人也逐渐成为一种趋势。据行业预测&#xff0c;到2030年&#xff0c;中国的数字人总市场规模将达…

APITable免费开源的多维表格与可视化数据库本地部署公网远程访问

APITable免费开源的多维表格与可视化数据库公网远程访问 文章目录 APITable免费开源的多维表格与可视化数据库公网远程访问前言1. 部署APITable2. cpolar的安装和注册3. 配置APITable公网访问地址4. 固定APITable公网地址 前言 vika维格表作为新一代数据生产力平台&#xff0c…

我与开源的历程

我在2000年开始接触开源&#xff0c;当时在松下航空电子美国总部工作。我负责将 IFE 系统从 Win31 迁移到 Linux。作为一个完全不懂 Linux 的小白&#xff0c;我不得不找到一台笔记本电脑安装并自学 Redhat Linux 6.1。2003年回到新加坡后&#xff0c;我发现没有一个凝聚 Linux…

最新AI创作系统ChatGPT系统运营源码+DALL-E3文生图+支持OpenAI-GPT全模型+国内AI全模型

一、AI创作系统 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI…

centos7下执行yum命令报错

前言 在Linux系统中&#xff0c;安装nginx时候&#xff0c;需要先安装环境。 Nginx是使用C语言开发&#xff0c;安装nginx需要先从官网上将源码下载&#xff0c;然后编译&#xff0c;编译需要gcc环境,但是在安装gcc环境的时候&#xff0c;执行命令报错。 yum install –y gcc-…

Java零基础——Redis篇

1.【熟悉】NoSQL的简介 1.1 什么是NoSQL NoSQL 是 Not Only SQL 的缩写&#xff0c;意即"不仅仅是SQL"的意思&#xff0c;泛指非关系型的数据库。强调Key-Value Stores和文档数据库的优点。 NoSQL产品是传统关系型数据库的功能阉割版本&#xff0c;通过减少用不到或…

易宝OA ExecuteSqlForSingle SQL注入漏洞复现

0x01 产品简介 易宝OA系统是一种专门为企业和机构的日常办公工作提供服务的综合性软件平台&#xff0c;具有信息管理、 流程管理 、知识管理&#xff08;档案和业务管理&#xff09;、协同办公等多种功能。 0x02 漏洞概述 易宝OA ExecuteSqlForSingle接口处存在SQL注入漏洞&a…

qt 5.15.2压缩和解压缩功能

qt 5.15.2压缩和解压缩功能 主要是添加qt项目文件.pro内容&#xff1a; 这里要先下载quazip的c项目先编译后引入到本项目中/zip目录下 INCLUDEPATH ./zip CONFIG(debug, debug|release) {win32:win32-g: PRE_TARGETDEPS $$PWD/zip/libquazipd.awin32:win32-g: LIBS -L$$PWD…

基于Netty的网络调用实现

作为一个分布式消息队列&#xff0c;通信的质量至关重要。基于TCP协议和Socket实现一个高效、稳定的通信程序并不容易&#xff0c;有很多大大小小的“坑”等待着经验不足的开发者。RocketMQ选择不重复发明轮子&#xff0c;基于Netty库来实现底层的通信功能。 1 Netty介绍 Net…

【pytorch】深度学习入门一:pytorch的安装与配置(Windows版)

请支持原创&#xff0c;认准DannisTang&#xff08;tangweixuan1995foxmail.com&#xff09; 文章目录 第〇章 阅读前提示第一章 准备工作第一节 Python下载第二节 Python安装第三节 Python配置第四节 Pycharm下载第五节 Pycharm安装第六节 CUDA的安装 第二章 Anaconda安装与配…