vue2安装echarts后运行，原本的组件库全部失效

最新推荐文章于 2024-01-23 14:07:28 发布

百万雨

最新推荐文章于 2024-01-23 14:07:28 发布

阅读量250

点赞数

文章标签： echarts vue.js 前端

本文链接：https://blog.csdn.net/aaa9692/article/details/130284548

版权

问题描述

因为有业务需求要画图标，我在vue2中安装了echarts

npm install echarts

结果运行后直接报错，不知道为啥我以前安装的组件库全部失效了。报错内容如下：
在这里插入图片描述

分析

回到安装命令后重新看了下，怎么才添加了4个packages？最要命的是也没报错信息，而且卸载了echarts重装后也不行，换了echarts的版本也不行，而且单纯卸载掉echarts后也仍然报错。
在这里插入图片描述

解决

这里给大家提供一个我自己成功解决的办法，供大家参考吧。

删除掉vue项目下的node_modules文件，重新安装所有组件库。再次运行vue项目，没问题了。
提示：删之前如果请事先确认需要安装那些组件库以及版本，别删了后不知道安装啥了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

百万雨

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
vue2安装echarts后运行，原本的组件库全部失效

vue2安装ecahrts导致原本的组件库无法使用，提供一个解决办法
复制链接

扫一扫

vue-element-admin:本项目是基于vue、Element、vuex、mockjs、axios构建的，其中引入了高德地图、Echarts、Excel表格导出、富文本编辑器的第三方组件

05-09

模拟测试一个Vue.js项目构建设置# install dependenciesnpm install or cnpm install# serve with hot reload at localhost:3000npm run dev# build for production with minificationnpm run build# build for ...

vue2项目中使用到echarts时，ECharts 报错问题：Initialize failed: invalid dom的报错原因

weixin_54193181的博客

08-09

1747

项目中使用到echarts时，ECharts 报错问题

2 条评论您还未登录，请先登录后发表或查看评论

vue 引入echart 图表使用

zhao142731的博客

11-08

527

第一步：安装echarts依赖 cnpm install echarts -S 第二步：在main.js中全局引入 import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts 第三步：在你的组件或页面中 a.vue <div id="myChart" :style="{width: '600px', height: '600px'}"></div> js部分代码： export defa

Vue2安装、项目创建及项目启动出错时的解决方法

ling08140814的博客

07-22

7907

Vue2安装 1、以管理员身份打开命令窗口。 2、输入node -v，检查Node.js是否安装成功。 3、国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。 npm install -g cnpm --registry=https://registry.npm.taobao.org 输入npm -v，检查npm是否安装成功。 4、安装wekpack npm install webpack –g 5、安装脚手架 npm install vue-cli -g 6、输入vue -V，检

vue项目：解决echarts升级后本地无法启动的问题

热门推荐

Aom_yt的博客

12-10

1万+

1.安装Echarts时报入下错误命令行输入了，vue -V,发现我的cli 是2.9.6； main.js中的vue版本是"vue": “^2.5.2”, 可能还不能支持最新版的echarts5.0；所以卸载重装版本就解决了此问题。 2.卸载 npm uninstall echarts 3.重装echarts npm uninstall echarts 在运行就可以了。 4.main.js main.js中我用的全局 // 引入echarts import echarts from 'echa

vue使用echarts中遇到的问题及解决方法

简白的博客

04-22

3299

最近在做demo的过程中用到了echarts，在过程中也踩了好多坑，所以专门记录一下遇到的问题及解决方案。遇到的问题安装完echarts依赖后表格示例无法显示示例图标显示后格式异常再次进入业务事件后提示dom已加载并展示异常解决方案安装完echarts依赖后表格示例无法显示解决方案：这种问题一般会是两种情况：一是版本不对应的问题，npm install echarts --save默认的是最新的版本(5.1x)，直接安装最新版本的echarts可能会出现上述问题，所以需要降低版本安装ech

vue想引入echarts，直接卡在安装失败如何解决

曲江涛的博客

05-18

2721

确保您已经正确指定了echarts的版本号，并且没有其他依赖项与之冲突。您可以参考echarts的官方文档来确定正确的版本和配置。有时候安装失败可能是由于缓存问题造成的。您可以尝试清除npm的缓存，然后重新安装echarts。请确保您的网络连接正常，并且没有被防火墙或代理服务器阻止。如果以上方法仍然无法解决问题，请提供更具体的错误信息或日志，以便我能够更好地帮助您解决问题。这些工具是用于管理依赖项的常见工具，您需要确保它们已经正确安装在您的开发环境中。然后，重新运行安装echarts的命令。

vue-cli搭建的项目中使用echarts——echarts版本问题导致的报错解决

yehaocheng520的博客

07-21

4838

今天遇到一个功能，就是绘制折线图，我之前是有写过的，但是之前是在引入的vue.js的项目中使用的，因此当时也是直接下载echarts.js，然后src引入后使用的。今天的项目是vue-cli搭建的项目，因此最好还是通过npm install echarts --save的方式来下载插件，并引入插件来使用。下载插件的时候，一定要注意要指定echarts的版本号，因此最新版的echarts与vue2.0有冲突，我今天就吃了这个亏。安装插件后，在main.js中挂载到vue原型上后，在页面中使用时，一直提

vue引入echarts遇到的报错问题

weixin_63102971的博客

08-11

2890

vue引入echarts遇到的报错问题：在浏览器一直报“reading init”；在浏览器报“reading ‘getAttribute’”

Vue简单整合Echarts遇到的问题

棉花泡泡糖的博客

04-30

423

vue init webpack 一个项目，router和npm记得选上，别的选no- 加入一个组件，在views下面写个Index和Login，记得最好大写，养成习惯，里面就放一些最基础的生成的东西，加个div包起来，vue只允许一个根路径。写完组件就放到路由里面，也就是router下面的index.js，import一下，然后在下面加路由信息，routes:[{path:‘/index’,name:‘index’,component:Index}] 写一个加一个注意，为了让路径里面没..

echarts的安装及使用

ingenuou_的博客

02-28

8284

echarts的安装及使用

Vue中使用echarts，帮你解决遇到的各种坑~~

Kamto

08-24

3510

笔者在之前的工作中没有遇到vue中使用echarts的情况，以下是我的爬坑之路，还望笑纳。 1、使用npm或yarn（推荐yarn，npm装的可能启动项目后报错 xxxx 'new'具体错误信息忘记了, 这时你要先找到node_modules中的echarts文件夹，整个删掉，或者使用命令行删除。然后使用yarn重装，如果还启动不了，那就用cnpm装）安装echarts： npm inst...

解决recharts不能安装问题

sanqima的专栏

12-30

7311

在R语言中，绘制基于HTML5的动态交互图片，需要用到rechart包，而rechart包没有发布到CRAN，这时可以加载devtools包，使用GitHub进行安装。详细步骤如下：　　1.下载与R相对应的RTools。 2.在R的命令行窗口输入安装Rtools的命令: require(devtools); install_github('ramnathv/htmlwidgets'); ...

vue2安装echarts

09-16

要在Vue2中安装echarts，你需要执行以下步骤： 1. 在`main.js`文件中引入`vue-echarts`和`echarts`模块： ``` import ECharts from 'vue-echarts' import "echarts"; ``` 2. 注册全局组件： ``` Vue.component('v-...