当前位置: 首页 > news >正文

vue3+vite使用dataV后项目运行报错、页面空白问题

Vue 大屏数据展示组件库官网:http://datav.jiaminghi.com/guide/
我的版本是:“@jiaminghi/data-view”: “^2.10.0”

一、dataV引入,看官网也可

// 安装 ( 我的安装版本 "@jiaminghi/data-view": "^2.10.0"  )
npm i @jiaminghi/data-view// 在main.js中全局引入
import dataV from '@jiaminghi/data-view'
app.use(dataV)

二、报错解决

1. 找到报错文件,把 :key=“i” 放到上面的 v-for那行里

可能有多个文件出错,一个一个修改就可以了,我这边是2个文件有问题
[plugin:vite:vue] <template v-for> key should be placed on the <template> tag. D:/webXjk/测试用的/vueviteproject/node_modules/@jiaminghi/data-view/lib/components/decoration3/src/main.vue:9:9 7 | > 8 | <rect 9 | :key="i" | ^
在这里插入图片描述

解决方法:看图片
在这里插入图片描述

2. 页面出现空白,看控制台报错

Uncaught SyntaxError: The requested module '/node_modules/@jiaminghi/c-render/lib/index.js?v=d94b69d5' does not provide an export named 'default'

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/d1a8fc1bb4eb4df7b7c791a737cc8f79.png

解决方法:在 vite.config.js 需要添加代码,主要是 optimizeDeps

export default defineConfig({base: '/web/object',  //服务器部署到其他文件这个需要更改 或直接 '' 就可放在任意文件夹plugins: [vue()],build: {commonjsOptions: {include: [/node_modules/,]}},optimizeDeps: {// 开发时 解决这些commonjs包转成esm包include: ["@jiaminghi/c-render","@jiaminghi/c-render/lib/plugin/util","@jiaminghi/charts/lib/util/index","@jiaminghi/charts/lib/util","@jiaminghi/charts/lib/extend/index","@jiaminghi/charts","@jiaminghi/color",],},
})

三、简单使用示例:轮播表 ==》表格滚动

<!-- dataV表格滚动示例 -->
<template><dv-scroll-board :config="config" style="width: 500px; height: 220px" />
</template><script lang="ts" setup>
import { ref } from "vue";let config = ref({header: ["列1", "列2", "列3"],data: [["行1列1", "行1列2", "行1列3"],["行2列1", "行2列2", "行2列3"],["行3列1", "行3列2", "行3列3"],["行4列1", "行4列2", "行4列3"],["行5列1", "行5列2", "行5列3"],["行6列1", "行6列2", "行6列3"],["行7列1", "行7列2", "行7列3"],["行8列1", "行8列2", "行8列3"],["行9列1", "行9列2", "行9列3"],["行10列1", "行10列2", "行10列3"],],
});
</script>

相关文章:

vue3+vite使用dataV后项目运行报错、页面空白问题

Vue 大屏数据展示组件库官网&#xff1a;http://datav.jiaminghi.com/guide/ 我的版本是&#xff1a;“jiaminghi/data-view”: “^2.10.0” 一、dataV引入&#xff0c;看官网也可 // 安装 &#xff08; 我的安装版本 "jiaminghi/data-view": "^2.10.0" …...

PDF 【人工智能白皮书 】【大模型安全实践白皮书】【大模型白皮书】【大模型/深度学习/人工智能原理/心智学习】

【2024 中国人工智能发展白皮书 】【2023 中国人工智能白皮书】【大模型/深度学习/人工智能原理/心智学习】 前言下面所有涉及到的白皮书文件的总下载链接&#xff08;网盘&#xff09;&#xff1a; 2024 人工智能发展白皮书 深圳市易行网数字科技有限公司2024 大模型训练数据白…...

【vue】13.深入理解递归组件

在Vue.js的开发实践中&#xff0c;组件是构建界面的核心概念。而递归组件则是一种特殊的组件&#xff0c;它能够自己调用自己&#xff0c;从而创造出无限嵌套的界面结构。本文将带你了解递归组件的应用&#xff0c;以及如何在Vue中实现和使用它。 一.什么是递归组件&#xff1f…...

【OFDM】OFDM Radar Algorithms in Mobile Communication Networks

[1] Maximum Likelihood Speed and Distance Estimation for OFDM Radar 1-CRB估计 1-初步形式 首先单频信号频率估计的CRB,也就是原文Eq.(3.53) v a r [ ω ^ ] ≥ 6 σ N 2 ( N 2 − 1 ) N \mathrm{var}[\hat{\omega}]\geq\frac{6\sigma_N^2}{(N^2-1)N} var[ω^]≥(N2−…...

如何检测java中的内存泄露及溢出,并预防?

引言 在Java开发中,内存管理是一个至关重要的方面。尽管Java有垃圾回收机制,但开发者仍然需要关注内存泄漏和溢出的问题。 内存泄漏会导致应用程序的性能下降,甚至崩溃,而内存溢出则会导致Java虚拟机(JVM)抛出OutOfMemoryError异常。 本文将探讨如何检测Java项目中的内…...

kafka 如何减少数据丢失?

大家好&#xff0c;我是锋哥。今天分享关于【kafka 如何减少数据丢失?】面试题&#xff1f;希望对大家有帮助&#xff1b; kafka 如何减少数据丢失? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Apache Kafka 是一个高吞吐量的分布式消息队列&#xff0c;广泛用…...

CTF-PWN: 虚表(vtable)

vtable vtable&#xff08;虚表&#xff0c;virtual table&#xff09;是面向对象编程中的一个关键概念&#xff0c;主要用于实现多态性&#xff08;polymorphism&#xff09;。它是一种数据结构&#xff0c;通常是一个指针数组&#xff0c;包含了类的虚函数&#xff08;virtu…...

Redis 集群 总结

前言 相关系列 《Redis & 目录》&#xff08;持续更新&#xff09;《Redis & 集群 & 源码》&#xff08;学习过程/多有漏误/仅作参考/不再更新&#xff09;《Redis & 集群 & 总结》&#xff08;学习总结/最新最准/持续更新&#xff09;《Redis & 集群…...

2024校园交友系统构建指南/保姆版教程与技巧uniapp+php支持二开

一、建构技巧 1.前后端分离:采用前后端分离的开发模式&#xff0c;有助于提升开发效率&#xff0c;降低维护成本。前端专注于用户界面和交互体验&#xff0c;后端专注于业务逻辑和数据处理。 2.数据安全与隐私保护&#xff1a;实现细粒度的用户权限控制&#xff0c;确保用户数…...

NVR设备ONVIF接入平台EasyCVR视频分析设备平台视频质量诊断技术与能力

视频诊断技术是一种智能化的视频故障分析与预警系统&#xff0c;NVR设备ONVIF接入平台EasyCVR通过对前端设备传回的码流进行解码以及图像质量评估&#xff0c;对视频图像中存在的质量问题进行智能分析、判断和预警。这项技术在安防监控领域尤为重要&#xff0c;因为它能够确保监…...

系统思考—啤酒游戏经营决策沙盘

《第五项修炼&#xff1a;学习型组织建立》——系统思考的深层实践 越来越多的客户发现&#xff0c;系统思考不仅仅是一门课程&#xff0c;而是一种长期的实践。感谢合作伙伴对《第五项修炼》的支持&#xff0c;将其作为一个整体项目推荐。广东嘉荣超市在8月结束两天系统思考的…...

组件封装思路

组件封装的核心思路是&#xff1a;把可复用的结构只写一次&#xff0c;把可能发生变化的部分抽象成组件参数(props/插槽)。 如果是像纯文本&#xff0c;像是一些主标题和副标题&#xff0c;可以抽象成prop传入 如果主体内容是复杂的模版&#xff0c;有图片有列表等&#xff0c;…...

akshare股票涨跌停获取统计分析

参看&#xff1a; https://akshare.akfamily.xyz/data/stock/stock.html#id375 数据源来自东方财富网&#xff1a;https://quote.eastmoney.com/ztb/detail#typeztgc 参数说明 涨停统计&#xff1a; n/m代表m天中有n次涨停板 安装&#xff1a; pip install akshare -i http…...

前端对一个增删改查的思考

1、来源&#xff1a;dify dify/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx at main langgenius/dify GitHub 2、代码流程&#xff1a; 3、思索问题&#xff1a; 1、为啥要用return形式&#xff0c;而不是value直接当函数&#xff1…...

【Clickhouse】客户端连接工具配置

ClickHouse 是什么 ClickHouse 是一个分布式实时分析型列式存储数据库。具备高性能&#xff0c;支撑PB级数据&#xff0c;提供实时分析&#xff0c;稳定可扩展等特性。适用于数据仓库、BI报表、监控系统、互联网用户行为分析、广告投放业务以及工业、物联网等分析和时序应用场…...

【测试平台】打包 jenkins配置和jenkinsfile文件

背景&#xff1a; 当打包机环境配置完成后&#xff0c;需要挂到master的jenkins中&#xff0c;完成调度。 jenkins启动 命令行直接启动即可。 nohup java -jar /usr/local/opt/jenkins/libexec/jenkins.war --httpListenAddress0.0.0.0 --httpPort80 appending output to n…...

Leetcode224 -- 基本计算器及其拓展

题目分析&#xff1a; 其实这个计算器的实现并不难&#xff0c;因为除了括号就剩下加减法嘛&#xff0c;括号肯定比加减法先执行&#xff0c;但是加减法是同级的&#xff0c;只是会改变数字的正负号而已&#xff0c;所以实现的逻辑并不是很难&#xff0c;我们只需要一个栈&…...

python的lambda实用技巧

lambda表达式 lambda表达式是一种简化的函数表现形式&#xff0c;也叫匿名函数&#xff0c;可以存在函数名也可以不存在。 使用一行代码就可以表示一个函数&#xff1a; # 格式 lambda arg[参数] : exp[表现形式] # 无参写法 lambda : "hello" # 一般写法 lambda …...

VB中的资源文件(Resource File)及其用途

在Visual Basic&#xff08;VB&#xff09;中&#xff0c;资源文件&#xff08;Resource File&#xff09;是一种特殊的文件&#xff0c;用于存储应用程序中使用的非代码资源。这些资源可以是字符串、图像、图标、音频文件、视频文件等。资源文件的主要用途是使应用程序的管理和…...

【vue】11.Vue 3生命周期钩子在实践中的具体应用

Vue 3的生命周期钩子为开发者提供了在不同阶段操作组件的强大能力。本文将带您了解每个生命周期钩子的使用场景&#xff0c;并通过简单的案例来展示它们在实际开发中的应用。 1. 创建阶段&#xff08;Creation Hooks&#xff09; beforeCreate 进行一些初始化操作&#xff0c…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...