当前位置: 首页 > 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…...

突破语言边界:XUnity.AutoTranslator全场景应用指南

突破语言边界&#xff1a;XUnity.AutoTranslator全场景应用指南 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 当你打开一款期待已久的外文游戏&#xff0c;却被满屏陌生文字阻挡了探索的脚步&#xff1…...

OpenClaw多通道管理:GLM-4.7-Flash同时对接飞书与钉钉的配置技巧

OpenClaw多通道管理&#xff1a;GLM-4.7-Flash同时对接飞书与钉钉的配置技巧 1. 为什么需要多通道管理&#xff1f; 上周我接到一个技术咨询需求&#xff1a;一个小型内容团队需要同时在飞书和钉钉两个平台上接收AI助手服务。他们的编辑用飞书&#xff0c;运营用钉钉&#xf…...

程序员转行学习 AI 大模型: 提示词工程 | 附精选学习资料

本文是程序员转行学习AI大模型的第12个核心知识点笔记&#xff0c;笔记后附精选的提示词工程学习资料。 当前阶段&#xff1a;还在学习知识点&#xff0c;由点及面&#xff0c;从 0 到 1 搭建 AI 大模型知识体系中。 系列更新&#xff0c;关注我&#xff0c;后续会持续记录分享…...

单片机开发三大软件架构对比与实践

单片机开发常用软件架构深度解析1. 项目概述在嵌入式系统开发中&#xff0c;软件架构设计直接影响系统的可靠性、可维护性和实时性。本文系统分析三种主流单片机软件架构方案&#xff0c;包括时间片轮询法、操作系统方案和前后台顺序执行法&#xff0c;为开发者提供架构选型参考…...

ThreadLocal 源码分析与内存泄漏问题

前言 ThreadLocal 是 Java 中实现线程局部变量的重要工具&#xff0c;被广泛应用于事务管理、链路追踪、用户上下文等场景。然而&#xff0c;面试中关于 ThreadLocal 的追问往往直指其底层设计和内存泄漏问题。 本文将深入分析 ThreadLocal 的源码实现&#xff0c;揭示内存泄…...

实战演练:基于快马平台快速构建一个电商场景的智能客服AI Agent

实战演练&#xff1a;基于快马平台快速构建一个电商场景的智能客服AI Agent 最近在做一个电商项目&#xff0c;需要给平台增加智能客服功能。传统开发流程要写大量业务逻辑代码&#xff0c;还要处理前后端对接&#xff0c;想想就头大。后来发现用InsCode(快马)平台可以快速实现…...

DFPlayer Mini串口协议与嵌入式驱动开发实战

1. DFPlayer Mini 驱动库技术解析&#xff1a;面向嵌入式工程师的底层控制实践DFPlayer Mini 是 DFRobot 推出的一款高度集成、低成本、低功耗的串口控制 MP3 播放模块&#xff0c;广泛应用于智能语音播报、工业人机交互、教育机器人、IoT 音频终端等场景。其核心价值在于&…...

BM12O2321-A高集成H桥模块的9位UART驱动原理与Arduino库实践

1. 项目概述BM12O2321-A 是由 Basetron&#xff08;BestModules&#xff09;推出的高集成度 H 桥驱动模块&#xff0c;专为中小功率直流电机、电磁阀、LED 阵列等双向负载控制场景设计。该模块并非传统意义上的分立 H 桥芯片&#xff08;如 L298N、TB6612FNG&#xff09;&#…...

VSCode党必看!用轻量级方案玩转LaTeX:2024年TexLive+VSCode配置全攻略

VSCode党必看&#xff01;用轻量级方案玩转LaTeX&#xff1a;2024年TexLiveVSCode配置全攻略 对于习惯在VSCode中高效编码的开发者而言&#xff0c;切换到传统LaTeX编辑器往往意味着要放弃熟悉的快捷键、扩展生态和流畅的代码体验。本文将带你用完全基于VSCode的轻量级方案构建…...

TSLint格式化器完全指南:打造个性化的代码检查报告

TSLint格式化器完全指南&#xff1a;打造个性化的代码检查报告 【免费下载链接】tslint :vertical_traffic_light: An extensible linter for the TypeScript language 项目地址: https://gitcode.com/gh_mirrors/ts/tslint TSLint作为TypeScript生态系统中最重要的代码…...