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'

解决方法:在 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 大屏数据展示组件库官网:http://datav.jiaminghi.com/guide/ 我的版本是:“jiaminghi/data-view”: “^2.10.0” 一、dataV引入,看官网也可 // 安装 ( 我的安装版本 "jiaminghi/data-view": "^2.10.0" …...
PDF 【人工智能白皮书 】【大模型安全实践白皮书】【大模型白皮书】【大模型/深度学习/人工智能原理/心智学习】
【2024 中国人工智能发展白皮书 】【2023 中国人工智能白皮书】【大模型/深度学习/人工智能原理/心智学习】 前言下面所有涉及到的白皮书文件的总下载链接(网盘): 2024 人工智能发展白皮书 深圳市易行网数字科技有限公司2024 大模型训练数据白…...
【vue】13.深入理解递归组件
在Vue.js的开发实践中,组件是构建界面的核心概念。而递归组件则是一种特殊的组件,它能够自己调用自己,从而创造出无限嵌套的界面结构。本文将带你了解递归组件的应用,以及如何在Vue中实现和使用它。 一.什么是递归组件?…...
【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 如何减少数据丢失?
大家好,我是锋哥。今天分享关于【kafka 如何减少数据丢失?】面试题?希望对大家有帮助; kafka 如何减少数据丢失? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Apache Kafka 是一个高吞吐量的分布式消息队列,广泛用…...
CTF-PWN: 虚表(vtable)
vtable vtable(虚表,virtual table)是面向对象编程中的一个关键概念,主要用于实现多态性(polymorphism)。它是一种数据结构,通常是一个指针数组,包含了类的虚函数(virtu…...
Redis 集群 总结
前言 相关系列 《Redis & 目录》(持续更新)《Redis & 集群 & 源码》(学习过程/多有漏误/仅作参考/不再更新)《Redis & 集群 & 总结》(学习总结/最新最准/持续更新)《Redis & 集群…...
2024校园交友系统构建指南/保姆版教程与技巧uniapp+php支持二开
一、建构技巧 1.前后端分离:采用前后端分离的开发模式,有助于提升开发效率,降低维护成本。前端专注于用户界面和交互体验,后端专注于业务逻辑和数据处理。 2.数据安全与隐私保护:实现细粒度的用户权限控制,确保用户数…...
NVR设备ONVIF接入平台EasyCVR视频分析设备平台视频质量诊断技术与能力
视频诊断技术是一种智能化的视频故障分析与预警系统,NVR设备ONVIF接入平台EasyCVR通过对前端设备传回的码流进行解码以及图像质量评估,对视频图像中存在的质量问题进行智能分析、判断和预警。这项技术在安防监控领域尤为重要,因为它能够确保监…...
系统思考—啤酒游戏经营决策沙盘
《第五项修炼:学习型组织建立》——系统思考的深层实践 越来越多的客户发现,系统思考不仅仅是一门课程,而是一种长期的实践。感谢合作伙伴对《第五项修炼》的支持,将其作为一个整体项目推荐。广东嘉荣超市在8月结束两天系统思考的…...
组件封装思路
组件封装的核心思路是:把可复用的结构只写一次,把可能发生变化的部分抽象成组件参数(props/插槽)。 如果是像纯文本,像是一些主标题和副标题,可以抽象成prop传入 如果主体内容是复杂的模版,有图片有列表等,…...
akshare股票涨跌停获取统计分析
参看: https://akshare.akfamily.xyz/data/stock/stock.html#id375 数据源来自东方财富网:https://quote.eastmoney.com/ztb/detail#typeztgc 参数说明 涨停统计: n/m代表m天中有n次涨停板 安装: pip install akshare -i http…...
前端对一个增删改查的思考
1、来源:dify dify/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx at main langgenius/dify GitHub 2、代码流程: 3、思索问题: 1、为啥要用return形式,而不是value直接当函数࿱…...
【Clickhouse】客户端连接工具配置
ClickHouse 是什么 ClickHouse 是一个分布式实时分析型列式存储数据库。具备高性能,支撑PB级数据,提供实时分析,稳定可扩展等特性。适用于数据仓库、BI报表、监控系统、互联网用户行为分析、广告投放业务以及工业、物联网等分析和时序应用场…...
【测试平台】打包 jenkins配置和jenkinsfile文件
背景: 当打包机环境配置完成后,需要挂到master的jenkins中,完成调度。 jenkins启动 命令行直接启动即可。 nohup java -jar /usr/local/opt/jenkins/libexec/jenkins.war --httpListenAddress0.0.0.0 --httpPort80 appending output to n…...
Leetcode224 -- 基本计算器及其拓展
题目分析: 其实这个计算器的实现并不难,因为除了括号就剩下加减法嘛,括号肯定比加减法先执行,但是加减法是同级的,只是会改变数字的正负号而已,所以实现的逻辑并不是很难,我们只需要一个栈&…...
python的lambda实用技巧
lambda表达式 lambda表达式是一种简化的函数表现形式,也叫匿名函数,可以存在函数名也可以不存在。 使用一行代码就可以表示一个函数: # 格式 lambda arg[参数] : exp[表现形式] # 无参写法 lambda : "hello" # 一般写法 lambda …...
VB中的资源文件(Resource File)及其用途
在Visual Basic(VB)中,资源文件(Resource File)是一种特殊的文件,用于存储应用程序中使用的非代码资源。这些资源可以是字符串、图像、图标、音频文件、视频文件等。资源文件的主要用途是使应用程序的管理和…...
【vue】11.Vue 3生命周期钩子在实践中的具体应用
Vue 3的生命周期钩子为开发者提供了在不同阶段操作组件的强大能力。本文将带您了解每个生命周期钩子的使用场景,并通过简单的案例来展示它们在实际开发中的应用。 1. 创建阶段(Creation Hooks) beforeCreate 进行一些初始化操作,…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
PHP和Node.js哪个更爽?
先说结论,rust完胜。 php:laravel,swoole,webman,最开始在苏宁的时候写了几年php,当时觉得php真的是世界上最好的语言,因为当初活在舒适圈里,不愿意跳出来,就好比当初活在…...
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?
Otsu 是一种自动阈值化方法,用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理,能够自动确定一个阈值,将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
Spring Boot面试题精选汇总
🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容(一)CDN 基础概念1. 定义2. 组成部分 (二)CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 (三)CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
