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 package.json配置深入分析

    Vue package.json配置深入分析

    这篇文章主要介绍了Vue package.json配置,package.json是每个前端项目都会有的json文件,位于项目的根目录中。很多脚手架在创建项目的时候会帮我们自动初始化好 package.json
    2023-01-01
  • Vue+SSM实现图片上传预览效果

    Vue+SSM实现图片上传预览效果

    这篇文章主要为大家详细介绍了Vue+SSM实现图片上传预览效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 浅析前端路由简介以及vue-router实现原理

    浅析前端路由简介以及vue-router实现原理

    路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能。这篇文章主要介绍了前端路由简介以及vue-router实现原理,需要的朋友可以参考下
    2018-06-06
  • vue前端如何将任意文件转为base64传给后端

    vue前端如何将任意文件转为base64传给后端

    这篇文章主要介绍了vue前端如何将任意文件转为base64传给后端问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue实现的父组件向子组件传值功能示例

    Vue实现的父组件向子组件传值功能示例

    这篇文章主要介绍了Vue实现的父组件向子组件传值功能,结合完整实例形式简单分析了vue.js组件传值的相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • vue2和elementUI 实现落日余晖登录页和滑块校验功能

    vue2和elementUI 实现落日余晖登录页和滑块校验功能

    这篇文章主要介绍了vue2和elementUI打造落日余晖登录页和滑块校验,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • Vue.js最佳实践(五招助你成为vuejs大师)

    Vue.js最佳实践(五招助你成为vuejs大师)

    这篇文章主要介绍了Vue.js最佳实践,本文主要面向对象是有一定vue.js 编辑经验的开发者,需要的朋友可以参考下
    2018-05-05
  • 分析Vue指令实现原理

    分析Vue指令实现原理

    自定义指令是vue中使用频率仅次于组件,其包含bind、inserted、update、componentUpdated、unbind五个生命周期钩子。本文将对vue指令的工作原理进行相应介绍
    2021-06-06
  • vue3+vite+ts如何配置多个代理并解决报404问题

    vue3+vite+ts如何配置多个代理并解决报404问题

    这篇文章主要介绍了vue3+vite+ts如何配置多个代理并解决报404问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • elementui 开始结束时间可以选择同一天不同时间段的实现代码

    elementui 开始结束时间可以选择同一天不同时间段的实现代码

    这篇文章主要介绍了elementui 开始结束时间可以选择同一天不同时间段的实现代码,需要先在main.js中导入相应代码,代码简单易懂,需要的朋友可以参考下
    2024-02-02

最新评论