VUE引入DataV报错解决实战记录

 更新时间:2024年04月24日 09:22:34   作者:zyk_520  
在使用vue开发大屏时,发现了一个很好用的可视化组件库DataV,下面这篇文章主要给大家介绍了关于VUE引入DataV报错解决的实战记录,文中通过代码介绍的非常详细,需要的朋友可以参考下

DataV官网(不支持Vue3):Welcome | DataV

一、按照官网引入后报错

【1】报错提示

Failed to resolve entry for package "@dataview/datav-vue3". The package may have incorrect main/module/exports specified in its package.json.

将 @dataview\datav-vue3/package.json 文件里的 module项index.js改为index.mjs

// "module": "./es/index.js", //修改前
"module": "./es/index.mjs", // 修改后

【2】报错:does not provide an export named 'default' 

问题原因:

第三方文件没有通过export default来导出不存在默认的对象。

解决方法:

(1)import 模块时,导入所有

import * as DataV from '@dataview/datav-vue3';
app.use(DataV, { classNamePrefix: 'dv-' });

(2)或者按需导入对应模块

import {BorderBox1} from '@dataview/datav-vue3';

【3】引入时报类型错误

报错信息:

没有与此调用匹配的重载。
第 1 个重载(共 2 个),“(plugin: Plugin<[{ classNamePrefix: string; }]>, options_0: { classNamePrefix: string; }): App<Element>”,出现以下错误。
类型“typeof import("g:/WSwork/vue-project/large-screen/large-screen/node_modules/@dataview/datav-vue3/es/index")”的参数不能赋给类型“Plugin<[{ classNamePrefix: string; }]>”的参数。
第 2 个重载(共 2 个),“(plugin: Plugin<{ classNamePrefix: string; }>, options: { classNamePrefix: string; }): App<Element>”,出现以下错误。
类型“typeof import("g:/WSwork/vue-project/large-screen/large-screen/node_modules/@dataview/datav-vue3/es/index")”的参数不能赋给类型“Plugin<{ classNamePrefix: string; }>”的参数。

报错原因:

        vue使用typescript,所以需要在*.d.ts文件中进行声明

解决方法:

        在env.d.ts文件中增加:declare module '@dataview/datav-vue3';

总结

到此这篇关于VUE引入DataV报错解决的文章就介绍到这了,更多相关VUE引入DataV报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue实现移动端touch拖拽排序

    vue实现移动端touch拖拽排序

    这篇文章主要为大家详细介绍了vue实现移动端touch拖拽排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • VUE使用docxtemplater导出word文档实例(带图片)

    VUE使用docxtemplater导出word文档实例(带图片)

    docxtemplate支持的功能很多,语法包含变量替换、条件判断、循环、列表循环、表格循环等,下面这篇文章主要给大家介绍了关于VUE使用docxtemplater导出word功能(带图片)的相关资料,需要的朋友可以参考下
    2023-06-06
  • vue动态绑定background的方法

    vue动态绑定background的方法

    background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等属性的缩写,本文我用动态绑定background-image来举例,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • vue实现组件值的累加

    vue实现组件值的累加

    这篇文章主要为大家详细介绍了vue实现组件值的累加,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • vue项目中使用ueditor的实例讲解

    vue项目中使用ueditor的实例讲解

    下面小编就为大家分享一篇vue项目中使用ueditor的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))

    Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))

    今天小编就为大家分享一篇Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML)),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 详解vue 计算属性与方法跟侦听器区别(面试考点)

    详解vue 计算属性与方法跟侦听器区别(面试考点)

    这篇文章主要介绍了详解vue 计算属性与方法跟侦听器区别(面试考点),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue中iframe使用以及结合postMessage实现跨域通信

    vue中iframe使用以及结合postMessage实现跨域通信

    这篇文章主要介绍了vue中iframe使用以及结合postMessage实现跨域通信方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 从0搭建vue3组件库Input组件

    从0搭建vue3组件库Input组件

    这篇文章主要介绍了从0搭建vue3组件库Input组件,每个功能的实现代码都做了精简,方便大家快速定位到核心逻辑,接下来就开始对这些功能进行实例代码讲解,需要的朋友可以参考下
    2022-11-11
  • Vue Router 中 Hash和 History 模式的核心区别、使用场景

    Vue Router 中 Hash和 History 模式的核心区别、使用场景

    文章详细介绍了VueRouter中Hash模式和History模式的核心区别、底层原理、使用场景及部署注意事项,文章还提供了实战部署的解决方案和选型建议,感兴趣的朋友跟随小编一起看看吧
    2026-01-01

最新评论